Question

我对html-lists和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

您可以使用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>

Answer 2

正如Elwhis所说，你可以做的是添加＆lt; div＆gt;在＆lt; li＆gt;中但你可以避免这样的“阶级”：

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

 ul li div 
 {
   border:1px solid black
 }

</style>

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

Answer 3

替换list-style-type：none;
使用list-style-position：inside;

li
 { 
  list-style-position:inside;
  border: 1px solid black;
 }

HTML UL CSS边框样式

3 个答案: