边界底部与李不跨越跨度

Question

我添加了边界底部样式与李内部跨度，但它不工作。

<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

使用引导程序col-*会在元素上放置一个浮点数。 Bootstrap的构建是通过包装row类的列来处理这个问题。事情是这样的：

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

或者你可以把在ul的row类，只是取决于你如何使用li元素。

Answer 2

试试这个

<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 3

尝试： -

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

Answer 4

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>