Przesunięcie kategorii li na prawą stronę

Question

Witam, próbuję na wiele sposobów przesunąć kategorie na prawą stronę lecz nic to nie daje 

		<div id="header">
			<li><a href="XXX.html">Strona główna</a></li>
			<li><a href="XXX.html">Oferta</a></li>
			<li><a href="XXX.html">Prace</a></li>
			<li><a href="XXX.html">Kontakt</a></li>
			<h1>Jan Kowalski</h1>
	</div>

#header{
	text-align: center;
	background-color: #000000;
	padding: 3px;
	height: 60px;
}
li{
	color: #ffffff;
	float: left;
	padding: 15px;
	list-style-type: none;
}
h1{
	color: #ffffff;
	text-align: center;
	margin-top: 8px;
}

 

Answer 1

Owrapuj te li w ul.

dla ul daj float: right;

Comments

Coś podziałało, tylko nazwisko nie jest już na środku, a zastosowanie margin-right i left auto nic nie daje. 

---

Do ul oprócz float: right, daj margin-left: 0.

---

Nic to nie dało :/

---

Ewentualnie jeszcze tak. http://codepen.io/anon/pen/KrBoav

---

Śmiga już, dzięki ;D

---

@kubaapk, tutaj dla ul warto dać relatywną pozycje i zwiększyć z-index bo prawie całe linki zakrywane są przez nagłówek.

---

Tam OP pewnie sobie już to dopracuje, pisałem na szybko. ;)

---

Właśnie teraz tak patrze, nie działają hrefy :/

---

No to zrób to co napisałem

---

zrobilem dla ul position: relative; tylko nie wiem czy do ul czy h1 wstawic  z-index, pierwszy raz mam z tym do czynienia.

---

dla ul

---

jaka wartość z-indexu podac?

---

sprawdzaj, od 2 zacznij

---

do 10 dojechałem i nic to nie dało

---

999 zadziała

---

jestes pewny ze nie 998? :D

Answer 2

Dobrze by było zacząć od otworzenia i zamknięcia listy.

Menu ma być po prawej a Jan Kowalski po lewej? Dla listy przypisz float:right, powinno zadziałać.

Tutaj równie dobrze można użyć flexboxu: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

Próbowałem już wcześniej to zrobić i nie zadziałało, wychodzi mi to 

a chce żeby kategorie były w tym czarnym divie, wyżej. 

---

Jednak nie musisz zmieniać kolejności ;-;

---

padding-left: 0*