我的<span>结构在运行时嵌套

Question

我在Visual Studio中有以下代码

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  <div class="icon">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </div>
 <h3> Navigation</h3>
</a>

但是在运行它时，它在浏览器中看起来像这样：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  <div class="icon">
    <span class="icon-bar">
    <span class="icon-bar">
    <span class="icon-bar">
    </span></span></span>
  </div>
<h3> Navigation</h3>
</a>

有谁知道为什么会发生这种情况以及如何解决这个问题？

Answer 1

正如Leo所说，根据我的个人经验，您可以尝试添加：

<span class="icon-bar">&nbsp;</span>
<span class="icon-bar">&nbsp;</span>
<span class="icon-bar">&nbsp;</span>

另外，请你从<h3>内删除<a>吗？

要添加它，您可以提供类似于完全隐藏文本的内容：

.icon-bar {overflow: hidden; text-indent: -100%;}