嵌套列表的边框样式

时间:2012-08-16 16:57:09

标签: css

在我的HTML文档中,我有一个带样式的嵌套列表:

li {
    list-style-type:none;
    border:1px solid;
    margin:3px;
}

li li {
    list-style:none;

}


<ul>
  <li>something
    <ul>
      <li>hello</li>
      <li>there</li>
    </ul>
  </li>
</ul>

使用我当前的CSS规则边框如下所示:

enter image description here

我希望它们看起来像这样,但不插入<span>标签:

enter image description here

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

也许是这样的:

li {
    clear: both;
    width: 200px;
    list-style-type:none;
    border:1px solid;
    margin:3px;
}
li ul{
    float: left;
}


<ul>
  <li>something
    <ul>
      <li>hello</li>
      <li>there</li>
    </ul>
  </li>
  <li>something
    <ul>
      <li>hello</li>
      <li>there</li>
    </ul>
  </li>
</ul>

结果:

enter image description here