Есть ли лучший выбор из float: left или display: inline для выравнивания элементов списка по горизонтали?
например: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
Лично мне не нравится float, но это может быть скорее эмоциональная вещь, чем логическая.
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>
Что насчет
li {
display:inline-block
};
Затем вы можете установить свойства, такие как ширина, высота, отступы, маржа и т.д.
Я заметил некоторые ошибки при отображении LI Inline в chrome. Моя граница LI иногда не отображается с соответствующим горизонтальным дополнением.
В общем, хотя мне нравится Inline, он по-прежнему дает вам горизонтальное расположение и отступы, и вы можете сделать приятный text-align: center; на UL и используйте UL для вертикального интервала.
Я обычно использую float только потому, что LI является блочным элементом по умолчанию и с этим следует обращаться по-моему, но есть явные варианты использования для обоих.
Это личное предпочтение.
Из точки CSS, Display:Inline= Float:Left(Right).
Когда дело доходит до того, что элементы будут горизонтальными, например <li>.
Правило css Float новее, чем Display.