Question

这是我的代码

<ul style="list-style-type: circle; margin-left:70px;">
<li >
    <a style="">
        <div style="border:1px solid green;float:left">asdsd</div>
        <div style="border:1px solid blue;float:left">.............</div>
    </a>
</li>
</ul>

由于某种原因，列表圈出现在文本上而不是左侧。

我怀疑是两个浮动的div是罪魁祸首。我已经尝试了我的常用解决方案，另一个div使用style =“clear：both”，但这也没有用。

这让我发疯了......

编辑：我在列表中有div的原因是我需要将此代码用于我的jquery UI自动完成，我需要将其分成列（我的代码中的div）这是我能做到的唯一方法。没有圆圈，一切都很好。但是圈子......

Answer 1

首先，我建议将CSS分解为另一个文件。将div显示为内联块而不是浮动它们将提供类似的外观。这是一个JS小提琴代码：http://jsfiddle.net/mMQBy/

Answer 2

您不能将块元素放入内联元素（<div>中的<a>）您必须在每个<a>内重复<div> 在display:inline-block上使用float:left;代替<div>。

示例

http://jsfiddle.net/hJfUF/

内部有两个浮动div的HTML列表无法正确显示

2 个答案: