爲什麼我的元素之間有空間？

Question

我有一個水平顯示的項目列表。我想在每個李的周圍創建邊框，並讓它們彼此緊挨着伸出。

我創建了一個小測試來說明問題，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 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/

Answer 2

而是採用.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

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

內聯塊有一個壞習慣，即在元素之間放置空格。順便說一句，這很自然。這是由之間空白導致<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> 

我傾向於第二種。雖然凌亂，但我可以看到列表的結構。