Li float vs display: inline

Ответ 1

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, вы не можете устанавливать такие свойства, как ширина, отступы (сверху и снизу), маржа и т.д...., что является препятствием для целей макета.

EDIT 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; }

Проверьте fiddle здесь.

Если вы не хотите использовать свойство 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>

Ответ 2

Что насчет

li {
       display:inline-block
};

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

Ответ 3

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

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

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

Ответ 4

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

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

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