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

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

究其原因，它们之间的空间，因为它们之间存在的空间。 :-)

您可以浮动li的左，那将摆脱它：

li { float: left; } 

的Ciao！

Answer 2

应用float财产李时珍和使用CSS reset或至少：

* { 
margin:0; 
padding:0; 
} 

Answer 3

该空间对于内联内容是正确的。你有两种选择：

1. 把它们放在同一条线上，就像你在做的一样;或
2. 使用浮动。

例如：

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

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

Answer 4

您可以通过使用HTML注释删除空间：

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

也有较新的浏览器支持的CSS属性，但我不记得它叫什么（这是一个很难的搜索查询）。

Answer 5

为了避免这些空间您可以使用flex CSS属性

ul { 
    display: flex; 
} 

见example。