Question

我从前端开发人员那里得到了一个HTML。菜单的一部分如下所示：

<ul id="subNav">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
</ul>

我必须添加一些编程标签，并且为了使代码更易于阅读，我已将其更改为：

<ul id="subNav">
    <li>
        <a href="#">Menu item 1</a>
    </li>
    <li>
        <a href="#">Menu item 2</a>
    </li>
</ul>

更改后，菜单中断了。元素之间的空间较小。我比较了计算的css，它们看起来一样。这是为什么？为什么在<li>和<a>之间“输入”会破坏布局？

在Chrome上测试过。

编辑：小提琴：http://jsfiddle.net/bqyjL6rf/

Answer 1

当您一起运行标记时，可以消除插入内嵌元素的空白区域。如第二个例子所示，将它们分开，将该空白区域重新放入，这就是您的布局发生变化的原因。

就像你在段落中输入的单词一样，内联元素在元素之间也有空格。

Answer 2

这些块之间的空格就像单词之间的空格。这并不是说规范无法更新以说内联块元素之间的空格应该没什么，但我相当肯定这是一个巨大的蠕虫，不可能永远发生。

调整 set display：inline-block而不是display：inline

li {
    font-family: SlateProBk;
    font-size: .6rem;
    line-height: .6rem;
    text-transform: uppercase;
    opacity: 0.75;
    -webkit-opacity: 0.75; 
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style-type: none;
    -webkit-font-smoothing: subpixel-antialiased;
}

检查这个小提琴 http://jsfiddle.net/bqyjL6rf/1/

＆＃39;进入＆＃39;在<li>标记和<a> tag breaks the layout</a> </li>之间

2 个答案: