从无序列表中删除填充

Question

多年来，有些事情困扰着我。如果你看this fiddle

你会看到一个简单的无序列表，在元素上有一些填充，背景颜色可以创建一个框。

列表中的每个项目之间都有空格。你怎么能摆脱它，所以盒子水平接触？

Html是：

<div id="dvLinks">
    <ul>
        <li><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
        <li><a href="#">Three</a>
        </li>
    </ul>
</div>

css是：

#dvLinks ul {
    margin: 0;
    padding: 0;
    list - style - type: none;
}
#dvLinks ul li {
    display: inline;
}
#dvLinks ul li a {
    text - decoration: none;
    padding: .1em 1em;
    color: #000;
    background-color: # 33EEDD;
}

Answer 1

有几种方法。一些是：

1）删除列表项元素之间的空格：

<li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li>

<强> jsFiddle example

2）在列表项元素之间放置HTML注释

<li><a href="#">One</a></li><!--
--><li><a href="#">Two</a></li><!--
--><li><a href="#">Three</a></li>

<强> jsFiddle example

3）将它们漂浮在左边：

#dvLinks ul li {
    display: inline;
    float:left;
}

<强> jsFiddle example

Answer 2

It's very simple:

CSS

#dvLinks ul li { display: table-cell; }

---

结果

Answer 3

inline会在元素之间留下空白区域。

将元素写在同一行而不是将它们写在不同的行上。

更改

<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>

到

<li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li>

Updated fiddle here.

Answer 4

您必须将ul font-size设置为0，然后您必须设置font-size的{​​{1}}

li

请参阅Demo here

这是内联/内联块的常见问题。

另一种解决方案如下：

#dvLinks ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 0;
}

#dvLinks ul li { display: inline; font-size: 16px; }

#dvLinks ul li a
{
    text-decoration: none;
    padding: .1em 1em;
    color: #000;
    background-color: #33EEDD;
}

无论如何，对我来说最好的解决方案就是向左浮动。你可以这样做：

// All elements in one line
<ul><li>Element #1</li><li>Element #2</li>...</ul>

// Or
// No space between li elements
<ul><li>
    Element #1</li><li>
    Element #2</li>...
</ul>

// Or
// Comments between li elements
<ul><li>
    Element #1</li><!--
    --><li>Element #2</li><!--
    ...-->
</ul>

// Or by using CSS
// Change the li display attribute to
ul li
{
    display : table-cell;
}

和CSS

<ul id="list" class="clearfix">
    <li>Element #1</li>
    <li>Element #2</li>
    <li>Element #3</li>
</ul>

Answer 5

您可以使用负边距。

#dvLinks ul li { 
    margin: 0 -1px;
 }

Answer 6

你可以添加

li { margin-left: -5px;}

http://jsfiddle.net/3gmZa/6/