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

问题描述：

我有一个水平显示的项目列表。我想在每个李的周围创建边框，并让它们彼此紧挨着伸出。为什么我的元素之间有空间？

我创建了一个小测试来说明问题，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来完成此任务。

任何想法发生了什么？我觉得我错过了一些明显的东西！

@jaredFarrish - 感谢编辑，我想直接在问题中包含这样一个小例子是有道理的 – 2012-02-26 11:14:17

这是由于浏览器将行间隔解释为与内联对象的间隔引起的。我正在尝试寻找解决方法。 – 2012-02-26 11:18:01

@JaredFarrish：是的，但是在较大的代码中这会变得混乱。 – 2012-02-26 11:24:48

答

据我所知，您将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 s和a s按原样修复代码。

现在，如果你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/

是的，只有浮动不适合这种工作。 'display：inline-block'是更正确的方法。 – 2012-02-26 11:23:39

是的，浮动技巧。为什么不内联工作？我很不喜欢使用浮点数 – 2012-02-26 11:23:41

@Truth - 你有链接到解释这个语句的东西吗？ – 2012-02-26 11:24:22

答

而是采用.dashboard_inline_links li

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

display:inline;使用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

是的，只有浮动不是为了这种工作。 'display：inline-block'是更正确的方法。 – 2012-02-26 11:23:06

答

由于内嵌块元素在下一个内嵌块元素之间放置了一个空间（通常宽度为4px）。

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

http://jsfiddle.net/aAHXx/

答

的问题是，换行符是由浏览器解释为空白。

我还没有找到一个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方式。

请注意，即使“li”和“a”之间的空格将显示为空格：http://jsfiddle.net/8F2XY/3/ – 2012-02-26 11:32:29

答

内联块有一个坏习惯，即在元素之间放置空格。顺便说一句，这很自然。这是由之间空白导致<li>小号

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

把<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>

我倾向于第二种。虽然凌乱，但我可以看到列表的结构。

谢谢，这是一个很好的替代方案， – 2012-02-26 11:57:54

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

相关推荐