0

这是我的代码

<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。我已经尝试了我通常的解决方案，使用另一个带有 style="clear:both" 的 div，但这也不起作用。

这真让我抓狂...

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

4

2 回答 2

1

首先，我建议将 CSS 拆分到另一个文件中。将 div 显示为 inline-block 而不是浮动它们将提供类似的外观。这是一个带有代码的 JS Fiddle：http: //jsfiddle.net/mMQBy/

于 2012-07-30T14:24:33.403 回答
0

You can't put block element in inline element (<div> in <a>).
You will have to repeat your <a> inside of each <div>
Than use display:inline-block instead of float:left; on your <div>.

Example

http://jsfiddle.net/hJfUF/

于 2012-07-30T14:33:20.970 回答