ul内的第二个ul需要先与而不是跳跃（margin-left）

Question

我无法对齐第二个ul并使其与第一个ul保持一致。第二个ul总是有自己的优势。我该如何防止这种情况发生？

示例代码

＆＃13;

＆＃13;

<ul>
    <li><h3 class="category">Lorum Impsum</h3>
		<ul style="display: block;">
			<li><h4 class="subcategory">Lorum ipsum</h4>
			<li><h4 class="question">Ladida!</h4></li>
		</ul>
	</li>
	<li>Lorum ipsum</p>
	<li>Lorum ipsum</p>
</ul>

＆＃13;

＆＃13;

＆＃13;

有人有想法吗？

Answer 1

您必须将父级ul元素中的<ul style="display: block;">更改为

<ul style="display: inline;">

http://jsfiddle.net/csdtesting/km7Lfjq4/

Answer 2

尝试这样的事情：

li > ul {
    padding-left: 0;
}

这样做会从嵌套无序列表中删除左边距。

小提琴：http://jsfiddle.net/MarkyC/kko1jjqw/1/

Answer 3

删除填充？

ul ul {
    padding-left: 0;
}

<ul>
    <li><h3 class="category">Lorum Impsum</h3>
		<ul style="display: block;">
			<li><h4 class="subcategory">Lorum ipsum</h4>
			<li><h4 class="question">Ladida!</h4></li>
		</ul>
	</li>
	<li>Lorum ipsum</p>
	<li>Lorum ipsum</p>
</ul>

Answer 4

您可以使用负边距将元素拉向相反的方向而不是这样：

li ul li {
  margin-left: -40px;
}

或者如果您想将其范围仅限于指导儿童：

li>ul>li {
  margin-left: -40px;
}