两个<li>元素之间的间距</li>

Question

我已经写了以下代码：

<ul>
    <li>Text</li>
    <li>text</li>
</ul>

和样式：

list-style-type: none;
padding: 5px;
display: inline;
background-color: #A9A9A9;

但我有两个li元素之间的间距，如下所示：

如何删除此间距？

Answer 1

将它们放入内联

<ul>
    <li>Text</li><li>text</li>
</ul>

Js Fiddle Demo

Answer 2

如果您float li项，则应删除li输出之间的边距。

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>


ul {
    list-style-type: none;
}

ul li {
    float:left;
    padding: 5px;
    display: block;
    background-color: #A9A9A9;
}

Answer 3

以下是避免空间的两种常用方法：

<ul>
  <li>
  one</li><li> <!-- use this to avoid the linebreak -->
  two</li><li>
  three</li>
</ul>

---

或者您可以使用评论：

<ul>
  <li>one</li><!--
  --><li>two</li><!-- Comments so there is no white-space
  --><li>three</li>
</ul>

<小时/> 您可以在此Demo

中查看

你得到的空间是some space between the elements。 （Tabs, Newline count as space）。使用此最小化HTML，它应该工作：）

<小时/> 您可以在此处详细了解Examples at CSS-Tricks

Answer 4

  

只需在你的Css中添加float：left

ul li {
   background-color: #A9A9A9;
   display: inline;
   float: left;
   padding: 5px;
}

Demo

Answer 5

上面提到的方法很多，但是很少有方法可以用另一种方法实现。使用font-size:0

ul
{font-size:0; /*This will remove the space totally*/
list-style-type: none;
} 

li{
padding: 5px;
display: inline;
background-color: #A9A9A9;
font-size:16px; /*This is important line so the font come again in same shape*/
}

以下是 Demo 。

Answer 6

尝试浮动并使用list-style-type ul：

ul {
  list-style-type: none;
}
li {
  padding: 5px;
  float:left;
  background-color: #A9A9A9;
}