Я пытаюсь отделить li-элементы, добавив к ним границы. Тем не менее, появляются нежелательные места:

enter image description here

Chrome говорит мне, что нет отступов / полей:

enter image description here

Кто-нибудь знает, откуда взялись эти места?

Код:

<ul style="list-style-type: none; padding: 0;">
  <% 15.times do |whatever| %>
    <li style="border-bottom: 1px solid red;">
       <div style="width: 100%; height: 50px; background-color: green; display: block; ">
      </div>
    </li>
  <% end %>
</ul>
1
Mansuro 23 Окт 2017 в 10:45

3 ответа

Лучший ответ

Вы видите проблему с округлением пикселей.

Вместо этого вы можете добавить границу к div, что позволяет изменять масштаб без артефактов.

li div {
  border-bottom: 1px solid red;
}
<ul style="list-style-type: none; padding: 0;">
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
</ul>
4
sol 23 Окт 2017 в 08:35

Попробуйте применить width:100%; float:left; к <LI> и / или <div>

Я добавляю образец здесь. Пожалуйста, проверь это.

ul li{
        border-bottom: 1px solid red;
        margin: 0;
        list-style: none;
    }
    ul li div{
        width: 100%; 
        height: 40px;
        background-color: green; 
        display: block;
    }
<ul>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
</ul>
0
Pons Purushothaman 23 Окт 2017 в 08:25

Удалите «Высота» на вашем div-стиле

<ul style="list-style-type: none; padding: 0;">
  <% 15.times do |whatever| %>
    <li style="border-bottom: 1px solid red;">
       <div style="width: 100%; background-color: green; display: block; ">
      </div>
    </li>
  <% end %>
</ul>
2
Asad Butt 23 Окт 2017 в 07:49