边界底部到 li，跨度不起作用

Question

我在 li 中添加了 border-bottom 样式，但它不起作用。

<ul>
<li style="border-bottom: 1px solid #ccc">
<span class="col-xs-5">Test 1</span>
<span class="col-xs-7"> Test 2</span>
</li>
</ul>

它相当简单，但它在跨度（Test1、Test2）上方呈现边框。我理解错了吗？

Answer 1

试试这个

<ul>
  <li style="border-bottom: 1px solid #ccc">
    <span class="col-xs-5">Test 1</span>
  </li>
  <li style="border-bottom: 1px solid #ccc">
    <span class="col-xs-7"> Test 2</span>
  </li>
</ul>

Answer 2

试一试：-

p {
        border-style: solid;
        border-bottom: thick dotted #ff0000;
    }

Answer 3

span{
border-bottom: 1px solid #ccc
}

<ul>
<li >
<span class="col-xs-5" >Test 1</span>
</li>
  <li >
<span class="col-xs-7"> Test 2</span>
</li>
</ul>

Answer 4

使用引导程序 col-* 在元素上放置一个浮动。 Bootstrap 旨在通过使用 row class 包装列来处理此问题。像这样：

<ul>
  <li class='row' style="border-bottom: 1px solid #ccc">
    <span class="col-xs-5">Test 1</span>
    <span class="col-xs-7"> Test 2</span>
  </li>
</ul>

或者您可以将 row class 放在 ul 上，这取决于您如何使用 li 元素。

边界底部到 li，跨度不起作用

border bottom to li with spans not working

css

border