如何将 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>

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

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

html

css

css-position