Question

我有以下HTML;

li 
{
    list-style: none;
    border: solid 1px blue;
    display: inline;
    margin: 0px 0px 0px 0px;
}
...
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 2</li>
</ul>

当我在他们自己的行上添加列表项时，它们之间会出现一个水平空格，但当我这样做时;

<li>Item 1</li><li>Item 2</li><li>Item 2</li>

他们不这样做。

无论如何都要阻止新线显示为空格，还是需要使用负边距？

Answer 1

您可以使用HTML注释删除该空格：

<ul>
   <li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 2</li>
</ul>

新浏览器还支持css属性，但我无法记住它所调用的内容（这是一个硬搜索查询）。

Answer 2

它们之间存在空间的原因是它们之间存在空间。： - ）

你可以将li向左浮动，然后就可以摆脱它了：

li { float: left; }

侨！

Answer 3

内联内容正确无误。您有两种选择：

把它们放在你正在做的同一条线上;或
使用浮动。

例如：

ul { overflow: hidden; }
li { float: left; border: solid 1px blue; margin: 0px; }

overflow: hidden确保包含<ul>不会崩溃。如果您向<ul>添加红色边框，则比较有和没有它的区别。

Answer 4

将float属性应用于li并使用CSS reset或至少：

* {
 margin:0;
 padding:0;
}

Answer 5

要避免使用这些空格，您可以使用flex css属性

ul {
    display: flex;
}

请参阅example。

如何阻止新行在HTML中的列表项之间添加空格

5 个答案: