1. 首頁
  2. 問答
  3. css list display-inline - margin是從哪裏來的？

css list display-inline - margin是從哪裏來的？

2011-07-11 57 views
2

下面的代碼產生由兩個綠色項目組成的輸出。在這些項目之間幾乎沒有空白區域（或任何背景顏色設置）。白色空間來自哪裏以及如何擺脫它？我希望輸出結果類似於FirstSecond，但它是First Second，兩者之間有空格。css list display-inline - margin是從哪裏來的？

<head> 
<style type="text/css"> 
ul { 
    list-style-type: none; 
    white-space: nowrap; 
} 
ul li { 
    display: inline; 
    background-color: #096; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li>First</li> 
    <li>Second</li> 
</ul> 
</body>the output

來源

2011-07-11 camcam

+0

我不知道，很好的問題！根據谷歌瀏覽器中的開發者工具，這不是保證金或任何東西的一部分 - 它只是*那裏*。很煩人！它在每個瀏覽器中都是這樣顯示的嗎？ – Ryan

回答

0

ul和li對他們有一些默認margin和padding。如果您不想要差距或更小/更大的差距，則需要重新設置。我認爲FF的30像素，如果我記得正確，但金額會因瀏覽器而異。

來源

2011-07-11 17:03:50 prodigitalson

+0

我用'CSS Reset'試過了這個問題，仍然存在一個空白..：/ – Phil

+1

@nick：元素之間有空格嗎？如果你將它們設置爲內聯，那麼如果存在於標記中，則將呈現空格（'\ 020'）。 – prodigitalson

+0

@prodigitalson謝謝！我有空間（「輸入」，又名新線）列表項之間，但我從來沒有懷疑這會導致輸出空間...完美的作品:) – camcam

2

你可以嘗試和漂浮li像這樣：ul li { float:left } ...它似乎刪除間距。示例：JsFiddle

來源

2011-07-11 17:07:09 Phil

1

add float：left;對於樣式UL LI中將取消默認保證金

來源

2011-07-11 17:07:53 kleinohad

相關問題

 相關問題