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/

li s之间以及li和a之间没有空格来修复代码原样。

现在，如果您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;

中使用float:left;使用.dashboard_inline_links li

.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

由于内联块元素在下一个内联块元素之间放置了一个空格（通常为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>之前和之后开始和结束评论。

这样做：

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

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

为什么我的李元素之间有空间？

5 个答案: