将 <li> 拆分为两列答案

【问题标题】：Split <li> into two column将 <li> 拆分为两列
【发布时间】：2011-06-09 23:10:42
【问题描述】：

<ul>
    <li>
        <div class="ext-left">
            <img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
        </div>
        <div class="ext-right">
            <a class="ext-name" href="#">Extension Name</a>
            <p class="ext-intro">Introduction here</p>
        </div>
    </li>
    ...
</ul>

我想将每个列表元素分成两部分（在同一行中），左侧是图像，右侧是链接和文本（它们应该在两行中）。
我尝试在 ext-left 上使用 float left 但它不起作用。
玩 jsfiddle：http://jsfiddle.net/UeThn/1/
这是正确的版本：http://jsfiddle.net/UeThn/10/

【问题讨论】：

标签： html css layout

【解决方案1】：

添加这个 CSS：

.ext-left{

    float:left;
}
li{
    clear:both;
}

新小提琴here

【讨论】：

在 LI 上添加一个清除以重置每个浮动，我修改了我的答案。

【解决方案2】：

这就是你所做的

<ul>
<li style="width:150px">
    <div style="width:100px;float:left">
        <img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
    </div>
    <div style="width:50px;float:right">
        <a class="ext-name" href="#">Extension Name</a>
        <p class="ext-intro">Introduction here</p>
    </div>
    <br clear="both"/>
</li>

思路如下： 1.给'li'一个宽度 2.给两个div的宽度 3.分别左右浮动 4. 在末尾添加一个带有 clear="both" 的喙

【讨论】：

这就是你必须做的让它工作。而且它没有那么多额外的：P

【解决方案3】：

这个怎么样：

li > div{
    display: inline-block;
}

[JSFiddle]

（但邪恶的浏览器不支持，请参阅信息here）

【讨论】：

【解决方案4】：

向左浮动似乎有效。认为你做错了什么。

http://jsfiddle.net/UXnVJ/

【讨论】：

【解决方案5】：

您只需要为每个 div 设置一个宽度 - 否则，他们认为它们应该是 100% 宽，这不允许下一个浮动在它旁边。见fiddle-fix here。

【讨论】：

【解决方案6】：

试试这个：

li {
    clear: left;
}

.ext-left {
    float: left;   
}

【讨论】：

【解决方案7】：

将两个 div 向左浮动

.ext-left, .ext-right{
    float: left;
}

li {
    clear: both;
}

【讨论】：