[HTML]Lista i przerwy między polami Opcje

[JamalBIG]

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 

[SmokAnalog]

[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.

[tzm]

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

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

Ten post edytował mitorski 25.07.2014, 11:46:39

[SmokAnalog]

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

[JamalBIG]

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

Ten post edytował JamalBIG 25.07.2014, 12:09:46

[tzm]

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

[czychacz]

[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?

Ten post edytował czychacz 25.07.2014, 12:12:34

[SmokAnalog]

Alternatywy to:

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

[JamalBIG]

rozwiazanie dziecinnie proste, dzieki czychacz

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