Czy istnieje najlepszy wybór spośród float: left lub display: inline do wyrównywania pozycji listy w poziomie?li float vs display: inline
np http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
Osobiście lubię float, ale może bardziej emocjonalne rzeczy zamiast logiczne.
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>
To co ja wolę głównie dlatego podczas korzystania display:inline nie można ustawić właściwości, takie jak szerokość, wypełniające (góra i dół), marginesów itd ... co jest upośledzenie celach układu.
EDIT 2014
Jest również możliwość wykorzystania właściwości display: inline-block. Należy zauważyć, że po utworzeniu elementów listy w linii lub w wierszu inline będą brane pod uwagę białe przestrzenie. W związku z tym będą niepożądane przestrzenie między elementami.
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; }
Sprawdź tutaj fiddle.
Jeśli nie chcesz używać właściwości font-size (w przypadku problemów ze zgodnością przeglądarki), możesz również użyć komentarzy html, aby pozbyć się spacji! Chociaż wolę powyższą metodę.
<ul><!--
--><li><a href="http://www.facebook.com">Facebook</a></li><!--
--><li><a href="httpt://www.google.com">Google</a></li><!--
--></ul>
Ustawienie szerokości może być samym handicapem, jeśli zawartość nie pasuje do szerokości. –
Zauważyłem kilka błędów w renderowaniu podczas wyświetlania Liniowego Inline w chrome. Moja ramka LI czasami nie jest renderowana z prawidłowym poziomym wypełnieniem.
Generalnie jednak lubię Inline, nadal daje poziome marginesy i dopełnienie i można zrobić ładne wyrównanie tekstu: centrum; na UL i użyj UL dla odstępów w pionie.
Zwykle używam float wyłącznie dlatego, że LI jest elementem blokowym domyślnie i powinien być traktowany w ten sposób w mojej opinii, ale istnieją jasne przypadki użycia dla obu.
Co
li {
display:inline-block
};
Następnie można ustawić właściwości takie jak szerokość, heigth, obicia, margines, etc ..
To osobiste preferencje.
Z punktu CSS: Display:Inline = Float:Left(Right).
Jeśli chodzi o tworzenie elementów poziomych, takich jak <li>.
Reguła css Float jest nowsza niż Display.
Masz na myśli wyrównywanie ich po lewej *, prawda? –
możliwy duplikat http://stackoverflow.com/questions/1702669/what-is-the-difference-between-floatleft-vs-displayinline-while-every-element i http://stackoverflow.com/questions/1107820/ która-jest-lepiej-dla-od-do-prawej-układu-unoszą-się-lub-wyświetla -linię - próbuje znaleźć bliższe dopasowania – BoltClock
Nie podoba mi się dawanie elementów listy 'display: inline', ponieważ nie zostały one zaprojektowane do tego. Podobnie jak przy podawaniu komórek tabeli innych wartości wyświetlania. 'float' jest tym, co chciałbym osiągnąć. –