如何将li中的div定位到父级ul

Question

我有这段代码（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>

这会将div直接放在Two下面。

是否可以将div移到最左边（即One下方）只用CSS ？

Answer 1

将父UL设置为position: relative将允许从子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>