Witam

Jak można pozbyć się przerw między pozycjami listy w poniższym kodzie?

[HTML] pobierz, plaintext 
<style>
	ul.lista {
		list-style:none;
		margin:0;
		background:red;
	}
 
	ul.lista li {
		display:inline-block;
		background:blue;
	}
</style>
<ul class="lista">
	<li>Raz</li>
	<li>Dwa</li>
	<li>Trzy</li>
</ul>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
ul.lista,
ul.lista li {
	margin: 0;
	padding: 0;
}
[CSS] pobierz, plaintext 

Ale coś mi się przypomina, że kiedyś sam próbowałem ustawić <li> jako inline-block i coś tam nie grało do końca.

http://jsfiddle.net/K2vdS/3/

edit: działa to o co chodzi? poprawiłem

Twój kod nie ma sensu. float nadaje automatycznie display: block, więc display: inline-block nie ma tu racji bytu. Poza tym kolejne elementy też będą floatowane, więc musiałbyś zrobić overflow: hidden na <ul>.

dodanie marign i padding dla li nic nie dało a floatowanie rozwala trochę całość bo jeżeli dam dla samego ul padding:10px a tło czerwone widać, że to się kupy nie trzyma

chyba ze macie jakąś alternatywe dla 'poziomej' listy

no to ale dziwisz się jak nam nie dałeś całości że nie wiemy jak Ci pomóc?

[HTML] pobierz, plaintext 
<ul class="lista"><li>Raz</li><li>Dwa</li><li>Trzy</li></ul>
[HTML] pobierz, plaintext 

pousuwaj whitespace pomiędzy znacznikami

//edit: wstawianie cytatów nie działa?

Alternatywy to:

1. Użycie innych tagów niż <ul> i <li>
2. Float na elementach menu + overflow: hidden na elemencie menu

rozwiazanie dziecinnie proste, dzieki czychacz

[HTML] pobierz, plaintext 
<ul class="lista">
<li>
Raz
</li><li>
Dwa
</li><li>
Trzy
</li>
</ul>
[HTML] pobierz, plaintext