li float vs display: inline

Question

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

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

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

Answer 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> 

Answer 2

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

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

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

Answer 3

насчет

li { 
     display:inline-block 
}; 

Вы можете установить свойства, такие как ширина, heigth, обивка, края и т.д ..

Answer 4

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

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

Правило css Float новее, чем дисплей.