用Chrome，IE7和IE8在ul內部浮動文本

我在無序列表（ul）內部存在浮動文本的問題。問題出現了，因爲我想將div元素浮動到左邊，我需要這樣做，因爲在這個div之後還有另一個div，它需要在同一行上，所以我使用float left。以下是jsFiddle的示例。現在問題是，在FF 6.02中，Opera 11.50和IE9可以正常工作，但在Chrome 14.0.835.202，IE7和IE8中，應該出現在文本前面的圓幾乎出現在後臺文本的末尾。用Chrome，IE7和IE8在ul內部浮動文本

我已經張貼上的jsfiddle的例子，但也將張貼在這裏的代碼：

HTML：

<ul> 
<li> 
    <div class="textLeft">Glavna knjiga</div> 
</li> 
</ul>

CSS：

.textLeft { 
float: left; 
position: relative; 
left: 4px; 
}

現在我該怎樣解決這個問題，所以我會在IE7和Chrome中顯示相同的內容？

來源

2011-10-09 Jernej Jerin

如果您不必使用相對位置，則可以使兩個div都內嵌塊，而不是左邊使用填充左邊。

下面是一個例子：http://jsfiddle.net/bQthE/3/

來源

2011-10-09 13:45:04

感謝這對IE8和Chrome非常有用，但不適用於IE7。下一個div不保留在同一行中。你可能知道這個解決方案嗎？ –

沒問題。這裏是一個黑客IE7：http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/ –

感謝您的幫助！ –

的問題是，股利是浮動的，但li本身是沒有的。這使得列表項目的指標即圓圈的位置就好像div不在那裏一樣。是否有可能浮動li，或可能整個ul？

來源

2011-10-09 13:45:12 PCasagrande

我已經嘗試過浮動ul和li，但沒有區別。您能否請在jsFiddle上發佈一個工作示例，該示例對li和ul使用浮動，並在所有列出的瀏覽器中以正確的方式顯示它。 –

http://jsfiddle.net/QbcyP/作品，如果你不在乎失去子彈點。如果你想保留這些只是做http://jsfiddle.net/ZEQwk/訣竅是，子彈不是元素的一部分，所以你必須調整邊距，讓他們正確顯示，而不是重疊。 – PCasagrande

感謝您的幫助。 –

爲什麼你需要浮動divs呢？設置您的div顯示：inline-block，並且會照顧它。有一點你必須記住，內聯塊顯示爲div右邊創建了4px的邊距，所以如果你有一個固定寬度的列表項（li），你必須考慮到這一點。

我通常不喜歡浮動元素，如果我可以幫助它。

來源

2011-10-09 14:32:16 mehulkar

用Chrome，IE7和IE8在ul內部浮動文本

回答

相關問題