Question

<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>

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

Answer 1

添加此CSS：

.ext-left{

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

新小提琴here

Answer 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'一个宽度给两个div一个宽度 3.分别左右浮动 4.在末尾添加一个clear =“both”的喙

Answer 3

这个怎么样：

li > div{
    display: inline-block;
}

[JSFiddle]

（但是邪恶的浏览器不会支持，请参阅info here）

Answer 4

漂浮左看起来似乎有效。认为你做错了什么。

http://jsfiddle.net/UXnVJ/

Answer 5

你只需要给每个div一个设定的宽度 - 否则，他们认为它们应该是100％宽，这不允许下一个浮在它旁边。请参阅fiddle-fix here。

Answer 6

试试这个：

li {
    clear: left;
}

.ext-left {
    float: left;   
}

Answer 7

将两个div浮动到左侧

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

li {
    clear: both;
}

将<li>拆分为两列</li>

7 个答案: