Блог

Главная - Вопросы по программированию - граница снизу до li с неработающими промежутками

граница снизу до li с неработающими промежутками

#css #border

#css #граница

Вопрос:

Я добавил стиль border-bottom для li с промежутками внутри, но он не работает. 

 <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). Я неправильно понимаю?

Комментарии:

1. как вы хотите получить результат??

Ответ №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>

Ответ №2:

Использование bootstraps 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>

Или вы могли бы поместить row класс в ul , просто зависит от того, как вы используете li элементы.

Ответ №3:

Попробуйте:-

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

Ответ №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>