如何阻止新行在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

您可以使用HTML注释删除该空间:

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

新浏览器还支持css属性,但我不记得它的名称(这是一个硬搜索查询).

Answer 2

它们之间存在空间的原因是它们之间存在空间.:-)

你可以将它们浮动li到左边,然后就可以摆脱它了:

li { float: left; }

再见!

Answer 3

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

ul {
    display: flex;
}

参见示例。