XHTML斷行空間的問題

基本上我有一個UL列表XHTML斷行空間的問題

<ul> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li> 
</ul>

現在列表的樣式是：

現在

li { 
    display:inline-block; 
    margin:5px 0 0 8px; 
    width:73px; 
    overflow:hidden; 
} 


li a { 
    display:block; 
    background:url(../images/gtborder.png); 
    width:73px; 
    height:55px; 
} 
li:hover { 
    background-position:0px -55px; 
}

好吧，每個列表之間的差距應該是完全8像素，但是當我在瀏覽器中查看...它的mroe然後8px。它因爲換行符。

如果我把所有的li標籤放在一行上，那就沒問題，但我真的不想那樣做。有沒有一種方法可以讓我的html保持原樣，只需編輯css，讓這個空間不再存在？

來源

2010-11-18 Ozzy

嗨奧茲，我真的不明白這個問題。實際上每個李之間都有8px。 – 2010-11-18 20:37:38

它的一個瀏覽器怪癖，基本上把這個lis之間的換行符當作li之間的空格。所以其實際上8px +考慮到字體和字體大小的空間的寬度。但設置字體大小爲0不會工作，因爲一些瀏覽器將其保留爲1px而不是0 – Ozzy 2010-11-18 20:52:53

好吧，既然你設置列表項是inline-block在您的標記這些項目之間的空白（即壓痕）就是在這裏製造麻煩。兩個列表項因此由空白和每個列表項左側的邊距分隔。

解決方案：嘗試浮動列表項或擺脫列表標記之間的空白。

祝你好運。

來源

2010-11-18 20:44:17 aefxx

我加了float：留給LI風格......像魅力一樣工作。謝謝:) – Ozzy 2010-11-18 20:47:21

儘管如此，請注意IE6的double float margin bug。看到這裏：http://www.positioniseverything.net/explorer/doubled-margin.html。簡短的回答：在相同方向間隔時使用填充而不是邊距。 – aefxx 2010-11-18 20:51:15

是的老雙重邊緣錯誤¬_¬顯示：內聯到救援：D – Ozzy 2010-11-18 20:56:39

得到它

有每個L1標籤之間的空間 - 我刪除它：

http://jsfiddle.net/j5yDd/1/

原來的答案::

你也有5像素的頂邊，因此空間將是13，你需要刪除5px的上邊距。

呃。你確定這是確切的CSS - 正如書面你有一個5px的頂部邊距和8左邊距。我沒有看到任何底部邊緣。

http://jsfiddle.net/j5yDd/

來源

2010-11-18 20:31:13

我擔心的唯一餘量是左邊距lol：P，因爲li是內聯塊，因此它全部在一行上。只是li之間的空間大於8px – Ozzy 2010-11-18 20:36:08

是的，我現在看到 - 我在小提琴中檢查過它，那裏有一個非常奇怪的隨機空間。 – 2010-11-18 20:37:52

@Ozzy看到我的編輯 – 2010-11-18 20:47:19

XHTML斷行空間的問題

回答

相關問題