CSS添加的缩进不适用于嵌套的ul-li

Question

我是CSS新手，我想为具有父级ul.optiongroup的ul-li添加一些额外的间距。但是这些ul.optiongroup也可以包含更多的ul.optiongroup和li

嵌套UL LI：

<div id="target" class="treeselector">
  <div class="styledSelect">
    Select
  </div>
  <ul class="optiongroup expand" rel="Home">
    <li class="title">
      <span>&nbsp;</span>Home
    </li>
  </ul>
  <ul class="optiongroup expand" rel="Products">
    <li class="title">
      <span class="fa fa-minus-square-o">&nbsp;</span>Products
    </li>
    <li rel="PCPROducts1" class="expand">
      PCPROducts1
    </li>
    <li rel="PCPROducts5" class="expand">
      PCPROducts5
    </li>
    <ul class="optiongroup expand" rel="PCPROducts6">
      <li class="title">
        <span class="fa fa-plus-square-o">&nbsp;</span>PCPROducts6
      </li>
      <ul class="optiongroup" rel="6th Product">
        <li class="title">
          <span class="fa fa-plus-square-o">&nbsp;</span>6th Product
        </li>
        <li rel="Digital">
          Digital
        </li>
        <li rel="Analog">
          Analog
        </li>
      </ul>
    </ul>
  </ul>
 </div>

尝试添加这样的CSS：

.optiongroup li{
  margin-left:40px;
  border:  1px red solid; /* Just to see what's happening there */
}

• 我怎样才能做到这一点
• 在这里用最小css设计ul-li最简单的方法是什么

Answer 1

您在不需要UL标签的情况下使用了很多UL标签。

你可以尝试这样做：

<ul>
  <li>Lorem</li>
  <li>Aliquam</li>
  <li>
      <ul>
          <li>Lorem ipsum .</li>
          <li>Aliquam tincidunt</li>
          <li>Vestibulum</li>
      </ul>  
  </li>
  <li>Lorem ipsum</li>
  <li>Aliquam tincidunt</li>
</ul> 

请注意，第二个UL位于LI 内部