Czwarty przycisk na panelu ma być przy samym końcu po prawej stronie, a nie tuż obok trzeciego przycisku.

Question

Witam.

Na stronie mam umieszczony panel o szerokości 1000px.
Nad panelem po lewej stronie znajdują się 4 przyciski:
[Strona główna] [O stronie] [Ciekawostki] [Kontakt]. Każdy z tych przycisków ma szerokość 180px. Obecnie te 4 przyciski znajdują się obok siebie (odległość pomiędzy nimi wynosi 7px).
Chciałbym, aby czwarty przycisk [Kontakt] pojawił się wyjątkowo przy samym końcu po prawej stronie panelu.

Tu jest dobra strona, na której mógłbym się wzorować:
http://oaa-accessibility.org/example/34/
ale tam 4 przyciski znajdują się obok siebie (Crust, Veggies, Carnivore, Delivery). Czwarty przycisk [Delivery] musiałby znajdować się wyjątkowo po prawej stronie, abym miał bardziej ułatwione zadanie.

Biorę pod uwagę zapis ---> float: right, aby ten czwarty przycisk [Kontakt] pojawił się po prawej stronie na mojej stronie. Jeżeli ten "float: right;" jest dobrym pomysłem, to co muszę poprawić w kodzie?

<div id="content">
		
	<ul class="tablist" role="tablist">
		<li id="tab1" class="tab" aria-controls="panel1" aria-selected="true" role="tab" tabindex="0">Strona główna</li>
		<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">O stronie</li>
		<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Ciekawostki</li>
		<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Kontakt</li>
	</ul>

	<div id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">
		Strona główna
	</div>

	<div id="panel2" class="panel-2" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
		O stronie
	</div>

	<div id="panel3" class="panel-3" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
		Ciekawostki
	</div>

	<div id="panel4" class="panel-4" aria-labelledby="tab4" role="tabpanel" aria-hidden="true">
		Kontakt
	</div>

</div>

#content
{
	height: 362px;
}

.tab
{
	margin: .2em 7px 0 0;
	color: black;
	background-color: #FFFFFF;
	font-size: 16px;
	border-top-left-radius:.5em;
	border-top-right-radius:.5em;
	float: left;
	display: inline;
	margin-top: auto;
	width: 180px;
	line-height: 40px;
	text-align: center;
}

.panel-1
{
	clear: both;
	display: block;
	width: 1000px;
	height: 322px;
	background-color: #DEDEDE;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
}

Przy tym zapisie:

.tab
{
	margin: .2em 7px 0 0;
}

7px to odległość pomiędzy przyciskami.

Answer 1

.tab:last-child{
   float:right;
}

 

Comments

Przy tym zapisie ten czwarty przycisk znalazł się co prawda po prawej stronie, ale nie przy samym końcu, a dokładnie powinien być jeszcze przesunięty w prawo prawdopodobnie o te 7px, aby było idealnie.

Dopisałem:

.tab:last-child{
margin-right: 7px;
}

ale to nic nie pomogło.

---

Zrobiłem, że teraz jest OK.

Wystarczy taki zapis:

.tab:last-child{
float: right;
margin-right: 0px;
}

Dzięki za pomoc.

Answer 2

To masz tu wiele opcji. Jedną z nich jest float:Right w zapisie inline stylu css ostatniego przycisku. Drugą opcją jest użycie selektora :last-child i danie tam float:right w css. Kolejną opcją jest danie dla tego ostatniego przycisku większego lewego marginesu. Ogólnie polecam Ci pierwszą opcję, druga też spoko, ale trzecia to taka trochę meh, ale i tak podałem. :)