css - 嵌套列表的边框样式

标签 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

有什么想法吗?

最佳答案

也许是这样的:

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

关于css - 嵌套列表的边框样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11992029/

相关文章:

html - 学习 CSS : Why does this code work?

css - 使用 LESS Css 中的公式计算背景位置

html - 尝试将导航栏后面的重复图像切片与另一个背景图像一起使用

html - 是否可以使用显示:none to create multiple CSS navbars for a responsive site?

html - CSS 显示 block 属性边距问题

css - z-index 不适用于相对 block 上的绝对 block

javascript - 使用纯 Javascript 在 h1 标题点击上切换元素内容

html - 元素没有水平居中并且没有出现图标(css)

css - Angular 输入/选择框左侧轮廓没有选择合适的半径。当我尝试自定义半径时

css - 一起使用 Webpack 和 Bootstrap 的错误