为什么我的 li 元素之间有空格？ [复制]

Question

我有一个水平显示的项目列表。我想在每个 li 周围创建一个边框，并让它们彼此相邻。

我创建了一个小测试来说明问题，seen here：

<ul class="dashboard_inline_links">
    <li><a href="#">October - 0</a></li>
    <li><a href="#">November - 0</a></li>
    <li><a href="#">December - 765</a></li>
    <li><a href="#">January - 0</a></li>
    <li><a href="#">February - 756</a></li>
    <li><a href="#">March - 2</a></li>
</ul>

.dashboard_inline_links li {
    border-style: solid;    
    border-width: 1px;    
    display: inline;  
    padding: 4px 8px;
}
.dashboard_inline_links a {   
    border-color: transparent #C6D3F0;   
    border-style: solid;    
    border-width: 1px;   
    color: #28478E;   
    display: inline-block;    
    margin: 0;    
    padding: 0;
}

简而言之 - 列表项之间有空格。我希望它们彼此相邻，现在我只能通过在 li 项上设置 margin-left = -3px 来实现这一点。

知道发生了什么吗？我觉得我错过了一些明显的东西！

Answer 1

据我所知，您将li 设置为display: inline，这意味着它将被视为段落中的文本。因此，元素之间的white-space 变成了您可以直观看到的空间。

这应该说明我的意思：http://jsfiddle.net/8F2XY/1/

注意，以下“解决”问题：

<ul class="dashboard_inline_links">
    <li><a href="#">October - 0</a></li><li><a href="#">November - 0</a></li><li><a href="#">December - 765</a></li><li><a href="#">January - 0</a></li><li><a href="#">February - 756</a></li><li><a href="#">March - 2</a></li>
</ul>

http://jsfiddle.net/8F2XY/2/

lis 和 lis 和 as 之间没有空格可以按原样修复代码。

现在，如果您float: left，该元素将变得像display: block 元素一样，将在显示中向左流动。空格将被忽略。

所以：

.dashboard_inline_links {
    border-bottom: 1px dotted #C6D3F0;
    border-top: 1px dotted #C6D3F0;
    display: inline-block; overflow: hidden;
    padding: 6px 0;
    width: 916px;
    margin-top: -5px;
    padding: 6px 0;
    position: relative;
    white-space: nowrap;
}
.dashboard_inline_links li {
    list-style-type: none;
    border-style: solid;    
    border-width: 1px;    
    float: left;
    padding: 4px 8px;
}
.dashboard_inline_links a {   
    border-color: transparent #C6D3F0;   
    border-style: solid;    
    border-width: 1px;   
    color: #28478E;   
    display: block;    
    margin: 0;    
    padding: 0;
}

http://jsfiddle.net/8F2XY/

Answer 2

不要使用display:inline;，而是在.dashboard_inline_links li中使用float:left;

.dashboard_inline_links li {
    border-style: solid;    
    border-width: 1px;    
    padding: 4px 8px;
    float:left;
}

见http://dabblet.com/gist/1916146

还有这个问题：What is the difference between Float:left vs Display:inline? While every element in browser goes to left by default

Answer 3

这是因为 inline-block 元素在下一个 inline-block 元素之间放置了一个空格（通常为 4px 宽）。

您可以使用 -4px 字母间距属性将其删除。

http://jsfiddle.net/aAHXx/

Answer 4

问题是换行符被浏览器解释为空格。

我还没有找到 CSS 解决方法，但是一条非常正确的评论指出您应该完全删除空格：

<ul class="dashboard_inline_links">
    <li><a href="#">October - 0</a></li><li>
    <a href="#">November - 0</a></li><li>
    <a href="#">December - 765</a></li><li>
    <a href="#">January - 0</a></li><li>
    <a href="#">February - 756</a></li><li>
    <a href="#">March - 2</a></li>
</ul>

这将在您当前的 CSS 设置中正常工作。不过，我仍在尝试找到一种 CSS 方式。

Answer 5

inline-block 有在元素之间放置空格的坏习惯。顺便说一句，这很自然。这是由<li>s 之间的空格引起的

你可以做些什么来解决这个问题：

• 将<li> 一个接一个地放入单个文件中。意思是，不要留下空格、制表符或换行符：

就这样

//notice after the </li>, you follow another after it. no spaces!
<ul> 
    <li>item</li><li>item</li><li>item</li> 
<ul>

• 或者，如果您更喜欢将其放在另一行中，请注释掉空格。确保您分别在 <li>s 之后和之前开始和结束评论。

这样做：

//notice after the </li>, you follow another after it. no spaces!
<ul> 
    <li>item</li><!--
 --><li>item</li><!--
 --><li>item</li> 
<ul>

我更喜欢第二个。虽然乱七八糟，但我可以看到列表的结构。