为什么这种HTML在正确缩进时会呈现不同的效果？

概述我有一个无序列表,用于表格导航,需要看起来像这样：.为了给标签提供圆角,每个标签都有左,中,右div和各自的css背景*. 当我像这样格式化列表项时(jsFiddle)： <li class="tab"> <div class="item-wrap"><span class="item-before"></span><span class="item"><a href="inventori 我有一个无序列表,用于表格导航,需要看起来像这样：.为了给标签提供圆角,每个标签都有左,中,右div和各自的CSS背景*.

当我像这样格式化列表项时(jsFiddle)：

<li >    <div ><span ></span><span ><a href="inventorIEs">Inventory</a></span><span ></span></div></li>

我得到了理想的结果：

但是当我格式化HTML以使其更具可读性时(例如jsFiddle)：

<li >  <div >    <span ></span>    <span >      <a href="inventorIEs">Inventory</a>    </span>    <span ></span>  </div></li>

渲染更改：

到底是怎么回事？

*注意：我知道这种方法已经过时了. class I built this for将我们限制为HTML 4和CSS 2.

解决方法 我无法完全解释它,但它与元素周围的空白有关…

这正确呈现……

<span ><a href="inventorIEs">Inventory</a></span>

这不……

<span > <a href="inventorIEs">Inventory</a> </span>

因此,重新格式化HTML,在元素周围引入空白.

总结

以上是内存溢出为你收集整理的为什么这种HTML在正确缩进时会呈现不同的效果？全部内容，希望文章能够帮你解决为什么这种HTML在正确缩进时会呈现不同的效果？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。