li float против дисплея: встроенный - PullRequest
Новая
       2

li float против дисплея: встроенный

18 голосов
/ 23 января 2012

Есть ли лучший выбор из float: left или display: inline для выравнивания элементов списка по горизонтали?

Например: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

Лично мне не нравится float, но это может бытьскорее эмоциональная вещь, нежели логическая.

Ответы [ 4 ]

15 голосов
/ 23 января 2012 
ul { list-style-type: none; overflow: hidden; width:200px; }
ul li { float:left; width: 100px; }
ul li a { display: block; padding: 10px; width:80px; }
ul li a:hover { background: black; }


<ul>
  <li><a href="http://www.facebook.com">Facebook</a></li>
  <li><a href="httpt://www.google.com">Google</a></li>
</ul>

Это то, что я предпочитаю в основном потому, что когда вы используете display:inline, вы не можете устанавливать такие свойства, как ширина, отступ (сверху и снизу), поля и т. Д., Что является помехой для макета.

РЕДАКТИРОВАТЬ 2014

Также можно использовать свойство display: inline-block. Следует обратить внимание на то, что, как только вы сделаете элементы списка встроенными или встроенными в блок, пробелы будут приняты во внимание. Следовательно, между элементами будут нежелательные пробелы. 

ul { list-style-type: none; width: 300px; font-size: 0; }
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; } 
/* The *display and zoom is a IE hack, though can't remember 
   now which one (guess it is IE7) */
ul li a { display: inline-block; padding: 10px; font-size: 13px; }

Проверьте скрипку здесь.

Если вы не хотите использовать свойство font-size (для проблем совместимости браузера), вы также можете использовать html-комментарии, чтобы избавиться от пробелов! Хотя я предпочитаю метод выше. 

   <ul><!--
    --><li><a href="http://www.facebook.com">Facebook</a></li><!--
    --><li><a href="httpt://www.google.com">Google</a></li><!--
--></ul>
9 голосов
/ 17 апреля 2014

Как насчет 

li {
       display:inline-block
};

Затем вы можете установить такие свойства, как ширина, высота, отступы, поля и т. Д.

2 голосов
/ 23 августа 2013

Я заметил некоторые ошибки рендеринга при отображении LI Inline в Chrome. Моя граница LI иногда не отображается при правильном горизонтальном заполнении.

В целом, хотя мне нравится Inline, он по-прежнему дает горизонтальные поля и отступы, и вы можете сделать хорошее выравнивание текста: center; на UL и используйте UL для вертикального интервала.

Я склонен использовать float исключительно потому, что LI является блочным элементом по умолчанию и, по моему мнению, должен рассматриваться таким образом, но для обоих есть явные варианты использования.

0 голосов
/ 15 февраля 2017

Это личное предпочтение.

С точки CSS, Display:Inline = Float:Left(Right).
Когда дело доходит до создания горизонтальных элементов, таких как <li>.

Правило css Float новее, чем Display.

...