Question

是否可以设置无序列表的样式，以便第二行和之后的那些缩进与列表项的第一行相同？

请详细说明我的意思

O----First Line
     --SECOND LINE SHOULD START HERE
     --EVERY OTHER LINE SHOULD BE LIKE THIS ALSO

Answer 1

为了补充我的评论，这里有一个jsfiddle，展示了我提到的内容。 http://jsfiddle.net/R5ptL/

<ul>
   <li>Parent</li>
   <ul>
       <li>Child1</li>
       <li>Child2</li>
       <li>Child3</li>
   </ul>
   <li>Parent2</li>
</ul>

如果你想让它们成为同样的风格......

ul, li {
    list-style-type: circle; /* or whatever style you choose */
}

编辑：如何使用多个无序列表和仅CSS：http://jsfiddle.net/R5ptL/1/

Answer 2

使用css first-child选择器将缩进应用于除第一行之外的每一行。例如：

ul li:first-child{margin:0px;}
ul li{margin:5px;}

Answer 3

li:not(first-child) {
  margin-left: 20px;
}

或

li {
  margin-left: 20px;
}
li:first-child {
  margin-left: 0;
}

Answer 4

就像这样:( HTML解决方案，而不是CSS）

<ul>
<li> first item </li>
<li> second item
<ul>
<li>first item of second list</li>
<li>second</li>
</ul>
</li>
<li> continue primary list </li>
</ul>

简而言之，您将在主UL中嵌入一个完整的新UL。

Answer 5

进一步测试后，我的第一个答案显然是不正确的。这应该工作：

ul li {
    text-indent:-10px;
    margin-left:10px;
}

注意：这个答案是在假设第一行以外的每一行都是简单的包装文本的情况下运行的。如果那些其他行被认为是子点，请使用gwin003的答案。

样式CSS无序列表

5 个答案: