Question

以下是一个例子：

<ul>
    <li>list</li>
    <li style="float:left;">list</li>
    <li style="float:left;">list</li>
    <li style="float:left;">list</li>
    <li style="float:left;">list</li>
</ul>

如何在保持浮动的同时保持其余li元素的列表样式？

谢谢;）

Answer 1

玩了一下，你使用的是IE吗？另外，您是否指定了DOCTYPE，以避免怪癖模式？在IE6中有一些奇怪的行为，浮动和列表项目项目符号可能在怪癖中被推进。

在我看来，像Internet Explorer一样，在浮动时会破坏列表样式类型。将其添加回工作正常。请参阅http://jsfiddle.net/gothick/VZC7F/5/以获取标记，并使用一些额外的CSS样式使其正常工作。据我所知，这应该是跨浏览器安全的。

使用内联样式的完整示例：

<ul>     
  <li>list</li>
  <li style="float:left; margin-left: 20px; list-style-type: square;">list</li>     
  <li style="float:left; margin-left: 20px; list-style-type: square;">list</li>     
  <li style="float:left; margin-left: 20px; list-style-type: square;">list</li>     
  <li style="float:left; margin-left: 20px; list-style-type: square;">list</li> 
</ul>

...当然，在我的jsFiddle示例中使用非内联样式/样式表会更有效。

我的示例适用于IE8。它看起来像the bullets might have disappeard in a more fundamental way in earlier version of IE;那篇文章解释了行为，并提供了一种重新创建它们的方法，虽然有一些烦人的解决方法（它基本上用背景图像重新创建了丢失的子弹。）

Answer 2

<ul>
    <li>list</li>
    <li style="float:left; clear: left;">list</li>
    <li style="float:left; clear: left;">list</li>
    <li style="float:left; clear: left;">list</li>
    <li style="float:left; clear: left;">list</li>
</ul>

Answer 3

这是我能想到的jsfiddle demo。除了第一个之外，它们都向左浮动并保持正方形。

CSS：在浮动的li元素上保持list-style

3 个答案: