html - 段落中无序列表元素的悬挂缩进

Question

我一直在尝试缩进位于段落文本内的无序列表中的第二行+文本，以便所有行都是偶数。但是，当我在下面插入样式时，它会扰乱主导航。

ul {
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}
li {
    padding-left: 1em;
}

我也尝试过 p.ul 和 p ul，但没有成功。有什么建议吗？

Answer 1

您需要使用仅在嵌套列表元素之后的 CSS 选择器。

即

ul > ul { Will select first nested ul }
ul ul { Will select all nested ul's NOT including the parent ul }

或者在你的情况下 -

p > ul { }

这可能行得通，但如果没有看到您的标记，就很难准确无误。

另一种选择——添加类名使CSS更容易选择特定元素

即

<p class="info-block">
   <ul>
       <li>Some list Item</li>
   </ul>
</p>

CSS

.info-block ul { padding-left: 1em; }

但正如 Paulie_D 所说 - 段落不应包含列表 Nest lists in paragraphs in html

相反，我建议使用 <div>