Question

如何删除内联“li” -elements之间的缩进？

margin: 0, display:inline-block无效。

Answer 1

它们是内联的，这意味着你看到的是空白，而不是边距等。例如，如果你改变了这个：

<ul class="b-bar-menu"> 
    <li class="b-bar-menu-item"><a href="#">item</a></li>
    <li class="b-bar-menu-item"><a href="#">item</a></li>
    <li class="b-bar-menu-item"><a href="#">item</a></li>
    <li class="b-bar-menu-item"><a href="#">item</a></li>
</ul>

对此，它消失了：

<ul class="b-bar-menu"> 
    <li class="b-bar-menu-item"><a href="#">item</a></li><li class="b-bar-menu-item"><a href="#">item</a></li><li class="b-bar-menu-item"><a href="#">item</a></li><li class="b-bar-menu-item"><a href="#">item</a></li>
</ul>

You can test out the difference here

Answer 2

解决此问题的另一种方法是添加

.b-bar-menu { font-size: 0; }
.b-bar-menu li { font-size: 20px; }

您可能会发现在列表项上不指定类更清晰，因为它们可以使用后代选择器进行定位。

Answer 3

如果您想摆脱间距而不必担心源中的空格，可以删除内联样式并使用

float: left

添加

时列表项上的

overlow:hidden

你的ul。但是，你必须弄乱相对位置才能使列表居中。

Answer 4

删除空白的另一种方法

<div class="l-bar">
  <div class="b-bar">
    <ul class="b-bar-menu">
      <li class="b-bar-menu-item"><a href="#">item</a></li
      ><li class="b-bar-menu-item"><a href="#">item</a></li
      ><li class="b-bar-menu-item"><a href="#">item</a></li
      ><li class="b-bar-menu-item"><a href="#">item</a></li>
    </ul>
  </div>
</div>

内联列表元素之间的缩进

4 个答案: