элемент div, не учитывающий заполнение встроенного списка - PullRequest
Новая
       27

элемент div, не учитывающий заполнение встроенного списка

1 голос
/ 28 февраля 2011

Я использую встроенный список, и я заметил, что div на следующей строке не будет учитывать его заполнение (то есть он рисуется прямо через границу элементов li).Что я могу с этим поделать? 

<html>
  <head>
    <style type="text/css">
      ul {
        margin: 0;
        padding: 0;
      }

      li {
        display: inline;
        list-style-type: none;
        padding: 10px;
        border: 1px solid gray;
      }

      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Hello</li>
      <li>World</li>
    </ul>
    <div>
      Hello, World!
    </div>
  </body>
</html>

Ответы [ 2 ]

2 голосов
/ 28 февраля 2011

Встроенные элементы не зависят от верхнего и нижнего отступов (см. , почему ).

Вместо этого вы можете сделать их inline-block: 

li {
   display: inline-block;
   zoom: 1; /* for IE */
   *display: inline; /* for IE */
}
0 голосов
/ 28 февраля 2011

Для li укажите display: inline-block; вместо inline

...