如何去除内联li元素的默认边距？

Question

我有以下 HTML 和 CSS：

li {
  display: inline-block;
  padding: 10px;
  border: 1px solid red;
  margin: 0;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

我试图通过设置

margin: 0;

来删除 li 元素之间的边距，但它不会删除边距。

如何消除这个间隙？

Answer 1

将所有

li

组合在一行中即可解决问题。但如果您想了解更多删除这些边距的技术，您可以访问：http://davidwalsh.name/remove-whitespace-inline-block。

它列出了这些技术：

1.元素之间没有空格

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

2.父级上的字体大小：0

.inline-block-list { /* ul or ol with this class */
font-size: 0;
}

.inline-block-list li {
font-size: 14px; /* put the font-size back */
}

3. HTML 评论

<ul>
 <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

4.负保证金

.inline-block-list li {
margin-left: -4px;
}

5.下降关闭角度

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Answer 2

尝试

float: left;

这将强制您的列表项在没有额外空格的情况下呈现。

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}

Answer 3

这是一件奇怪的事情，你需要删除空格，看看这个小提琴

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

http://jsfiddle.net/TPje6/3/

您可以做的另一件事是添加

margin: -2px;

： http://jsfiddle.net/TPje6/6/

浮动技巧也很有效，但使位置样式变得更加困难

Answer 4

<ul>

元素上的填充是造成这种情况的原因。这将完全删除填充：

ul {
  padding-left: 0;
}

如果您仍然想要一些填充，请根据您的喜好调整值。

MDN 文档 -

padding

MDN 文档 -

padding-left

Answer 5

这是如何为内联元素呈现空白的令人烦恼的副作用。我想到了一些解决这个问题的选项。

选项1： 在

float: left

元素上使用

li

属性

jsfiddle

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}

选项2： 删除 html 标记中的空格

jsfiddle

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

选项3： 将

font-size

的

ul

属性设置为

0px

jsfiddle

ul {
    font-size: 0px;
}

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    font-size: 16px;
}

Answer 6

更改一行标记以删除默认空格

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

CSS

li {
    display: inline; // Change
    padding: 10px;
    border: 1px solid red;
    margin: 0;
}

演示

Answer 7

使用以下CSS规则来渲染样式

li {
    border: 1px solid #FF0000;
    display: table-column-group;
    float: left;
    margin: 0;
    padding: 10px;
   }

Answer 8

您可以将

li

设为

font-size: 0;

然后将

li a

设置为正常

font-size

这样，您将使 whitespace 的宽度为 0 像素，并保持您的 html clean 且易于阅读。