我的 <span> 标签不起作用。元素堆叠而不是展开

Posted 2023-03-06

【中文标题】我的 <span> 标签不起作用。元素堆叠而不是展开

【英文标题】：My <span> tags are not working. elements are stacked instead of spanned out

【发布时间】：2019-01-27 16:13:44

【问题描述】：

我正在学习一个名为 @coursetro（AdobeXD、Vue、React、Angular）的网站上的教程，我正在尝试构建我的标头组件，当我运行程序时，我所有的标头元素都在我的标头组件只是堆叠在一起。我已经附上了我的 html 代码以及在 vue.js 中使用的 sass 和 js。我知道这很简单，但我已经 2 天试图弄清楚这一点。 （我正在使用：Balma、Sass）

<template>
<div id="app">
<div class="nav has-shadow">
  <div class="container">
    <div class="nav-left">
      <a class="nav-item"><img src="./assets/logo.png"  
     ></a>
    </div>

    <span class="nav-toggle">
      <span></span>
      <span></span>
      <span></span>
    </span>

    <div class="nav-right nav-menu">

      <router-link to="/" class="nav-item r-item">Home</router-link>
      <router-link to="/faq" class="nav-item r-item">Features</router-link>
      <router-link to="/faq" class="nav-item r-item">About</router-link>
      <router-link to="/faq" class="nav-item r-item">FAQ</router-link>

      <div class="nav-item">
        <p class="control">
          <a class="button is-primary is-outlined">
            <span class="icon">
              <i class="fa fa-download"></i>
            </span>
            <span>Join Now</span>
          </a>
        </p>
      </div>

    </div>
  </div>
</div>
<router-view></router-view>
</div>
</template>

<script>
export default 
name: 'App'

</script>
<style lang="sass">
@import '../node_modules/bulma/bulma.sass'
@import 'mq'

</style>

最好的问候

【问题讨论】：

<span> 并不意味着“跨越”——它是一个包含或组合其他元素的内联元素（我看到的主要用途是图标和文本）——参见 MDN：developer.mozilla.org/en-US/docs/Web/HTML/Element/span。

解决这个问题的一个好方法是消除所有其他技术，并获得一个仅使用 HTML 和纯 CSS 的确认结构。通过这种方式，您将学习基础知识，并且您还可以获得干净的代码以在此处作为 sn-p 发布，以便我们都可以为您提供帮助。现在我们无法看到 或任何其他元素应用了什么 CSS。无论如何，如果您参考外部教程，如果您可以链接到它会很好。

【参考方案1】：

我认为误解了 <span> 。它是一个内联元素，正如 ThisGuyHasTwoThumbs 已经解释的那样

你可以很容易地用 vue.js 实现你想要做的事情：

<span v-on:click="toggle= !toggle" class="nav-toggle">
    <div v-show="toggle"class="nav-container">
        <span></span>
        <span></span>
        <span></span>
     </div>
</span>

v-show 取决于 toggle 变量的值是否显示 div。 当您单击跨度时，v-on:click="toggle= !toggle" 会切换 toggle 变量。您也可以将跨度放置在其他位置。