CODEWITHSUNDEEP
htmlcsscss-position
rybo111
rybo111

Reputation: 12588

How to position a div in a li to the parent ul

I have this code (JSFiddle):

ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
}
li { 
    border:1px solid grey; 
    display:inline-block; 
}
div { 
    position:absolute; 
}
<ul>
    <li>
        One
    </li>
    <li>
        Two
        <div>Some content</div>
    </li>
</ul>

This positions the div directly below Two.

Is it possible to move the div to the far left (i.e. below One) with just CSS?

Upvotes: 0

Views: 1335

Answers (1)

Red2678
Red2678

Reputation: 3297

Setting the parent UL to position: relative will allow for absolute positioning from within a child LI.

ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    position: relative;
}
li { 
    border:1px solid grey; 
    display:inline-block; 
}
div { 
    position:absolute;
    left: 0;
}
<ul>
    <li>
        One
    </li>
    <li>
        Two
        <div>Some content</div>
    </li>
</ul>

Upvotes: 3

Related Questions