HTML UL CSS边框样式

Question

关于HTML列表和CSS,我有一个小问题.我想要一个看起来像这样的列表(whit子列表)(通过将代码复制到http://htmledit.squarefree.com/来查看结果):

 <style type="text/css">
 ul
 {
  border: 0px solid #90bade;
 }
 li
 { 
  list-style-type:none;
  border: 1px solid black;
 }
 .lv1
{
   margin:0px 0px 0px 10px;
}

</style>

<ul>
  <li>One</li>
  <li class ="lv1">Sub</li>
  <li>One</li>
</ul>

但我更喜欢使用像这样的html代码列表:

<ul>
  <li>One
     <ul>
        <li>Sub</li>
     </ul>
  </li>
  <li>One</li>
</ul>

不幸的是我无法弄清楚,如何设置第二个列表whit CSS的样式,以使其看起来像第一个.有没有人知道是否可以只使用CSS,或者我是否必须制作一个大的列表并使用类(如第一个列表中)来获得所需的布局？

提前致谢

Answer 1

您可以使用a包装文本div并提供div所需的边框.将样式添加div到CSS并从中删除边框li.这应该够了吧.但是,如果没有编辑HTML,我看不到可能的解决方案.

.border {      
  border: 1px solid black; 
}

    <ul>   
      <li>
        <div class="border">One</div>
        <ul>
          <li><div class="border">Sub</div></li>
        </ul>
      </li>   
      <li><div class="border">One</div></li>
    </ul>