Geek asks and answers

Split <li> into two columns

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

I would like to split each element of the list into two parts (in one line), on the left is an image, on the right is a link and text (they should be in two lines).
I tried using float left to ext-left, but it does not work.
Play with jsfiddle: http://jsfiddle.net/UeThn/1/
This is the correct version: http://jsfiddle.net/UeThn/10/

+3
source share
7 answers

Add this CSS:

.ext-left{

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

New fiddle here

+5
source

Here is what you do

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

The idea is: 1. give "li" width 2. give both div widths 3. Float left and right respectively 4. Add a beak with clear = "both" at the end

+1

:

li > div{
    display: inline-block;
}

[JSFiddle]

( , . )

+1

You just need to give each div a given width - otherwise they think that they should be 100% wider, which prevents the neighbor from swimming next to it. See script fix here .

0
source

Try the following:

li {
    clear: left;
}

.ext-left {
    float: left;   
}
0
source

Put both divs to the left

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

li {
    clear: both;
}
-1
source

More articles:


All Articles