列表項之間的多餘空間

我在每個列表項中都有div，並且列表項在IE和FF上的每個列表項之前似乎都有一個空格。我不太清楚爲什麼它會這樣做，因爲它在Chrome上看起來很好。我在網上搜索並嘗試將margin和padding設置爲0，並試圖將代碼放在同一行，但似乎無法擺脫我的div上方的空間。我在這裏的div有jquery附加到它，所以我不確定它是否也影響它呢？我在網上查了一下，有人說只有李應該居住在ul/ol，所以我不確定這是不需要的空間的另一個原因？列表項之間的多餘空間

想知道是否有人知道是否有辦法擺脫不必要的空間？如果沒有，我將不得不用另一種方式（沒有列表）來實現預期的結果。

THanks提前。

我的代碼

<ol> 
<li><div class="doSomething">testing1</div></li> 
<li><div class="doSomething">testing2</div></li> 
<li><div class="doSomething">testing3</div></li> 
</ol>

的結果看起來是這樣的

1. 
    testing1 
2. 
    testing2 
3. 
    testing3

來源

2014-02-17 user3110299

divs不能在列表項目內（無效html）。 – sinisake

嘗試使用'normalise.css'之類的東西，看看它是否仍然在每個瀏覽器上看起來不同 – Sam

@nevermind爲什麼這應該不是有效的？ 'list-item'裏面的'block'是有效的... – enyce12

我承擔這些列表項顯示：inline-block的;這裏是你如何刪除空間：

HTML

<ul> 
    <li>Item1</li><!-- 
    --><li>Item2</li><!-- 
    --><li>Item3</li> 
</ul>

添加這些都會讓瀏覽器解釋線作爲HTML註釋的其餘部分，去掉多餘的空格

來源

2014-02-17 10:29:42

用CSS實現這一點會更聰明。 – Itay

你將不得不使用取決於字體大小負利潤率，我更喜歡比使用任意切緣陰性加入HTML註釋。內聯塊將把空白空間解釋爲一個字符。這裏有一個小提琴http://jsfiddle.net/T43TL/ –

可以實現與'字spacing'並沒有特別的東西。 http://jsfiddle.net/T43TL/1/ – Itay

~~我不是確定在 <li>元素內有 <div>實際上是有效的。~~
（我剛剛檢查，並按照在OP的評論，是的，<div> s爲有效的<li>標籤）

然而，忽略，試圖從要素之間刪除空格...

<ol> 
    <li><div class="doSomething">testing1</div></li 
    ><li><div class="doSomething">testing2</div></li 
    ><li><div class="doSomething">testing3</div></li> 
</ol>

來源

2014-02-17 10:30:04 freefaller

試試這個。它可以幫助你。

ol {font-size:0} 
ol li {font-size:12px;}

來源

2014-02-17 10:33:27

如果你確實想通過CSS來做到這一點，這是可能的。正如Jonas Grumann所指定的，當您使用嵌入塊元素時，會顯示此問題。它來自瀏覽器在內聯元素之間自動添加的空間。

你可以擺脫它的字體大小設置爲0父元素，然後將其復位到正常的子元素：

ol { 
    font-size: 0; 
} 

ol li { 
    font-size: 14px;/*Or whatever size you need*/ 
}

不過，我不確定它，此解決方案可能會對Android瀏覽器使用有一些問題。

來源

2014-02-17 10:39:57 Ancom

列表項之間的多餘空間

回答

相關問題