列出CSS / HTML中的项目文本定位

Question

考虑以下HTML

<ul><li><p>With paragraph</p></li></ul>
<ul><li>Without paragraph</li></ul>

使用以下CSS：

ul { list-style-position: inside; }

第一个列表项的文本位于列表项目符号的下方，而第二个列表项的文本位于常规项目的下方：

*
With paragraph

* Without paragraph

导致文本定位的原因是什么，以及如何修复CSS以使文本在子弹后始终变为直线？

现场演示here。

Answer 1

<p>标记是一个块元素，它也具有默认margin和padding。因此，您需要“重置”这些值并将inline-block设置为：

ul { list-style-position: inside; }

ul p {
    display: inline-block;
    margin: 0;
    padding: 0;
}

<ul><li><p>With paragraph</p></li></ul>
<ul><li>Without paragraph</li></ul>

Answer 2

这是因为p-tag是块元素。试着用这个：

ul li p { display : inline-block; }

Answer 3

使用CSS将p显示为内联块。