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.