[CSS] Równomierne rozmieszczenie wielu elementów w jednej linii
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
W dzisiejszym artykule postanowiłem poruszyć kwestię wyrównywania położenia elementów w jednej linii.
Z pozoru, wydaje się to banalnym problemem do rozwiązania, ale można go rozwiązać na kilka sposobów. Dzisiaj zaprezentuję sposób związany z atrybutem inline-block i white-space. Myślę, że może się to przydać Tobie.
Na początek musimy zbudować strukturę takiego obiektu na stronie. Przyjmie on postać następująca:
<div id="blok">
<div class="element">
<p><img src="1.jpg"/></p>
</div>
<div class="element">
<p><img src="2.jpg"/></p>
</div>
<div class="element">
<p><img src="3.jpg"/></p>
</div>
<div class="element">
<p>Jakiś box wyśrodkowany</p>
</div>
</div>
W takie elementy można umieszczać jakąkolwiek zawartość strony internetowej, bo to tutaj nie ma znaczenia co będzie w środku takiego elementu.
Kolejnym krokiem jaki musimy zrobić to zdefiniowanie stylu dla tych elementów strony, dzięki którym elementy "automagicznie" będą się ładnie środkować w obiekcie nadrzędnym. Kod CSS wygląda następująco:
#blok {
background: #333;
text-align: center;
white-space: nowrap;
font-size: 20px;
letter-spacing: 35px;
line-height: 12px;
overflow: hidden;
padding: 10px;
width: 800px;
}
.element {
width: 130px;
height: 130px;
border: solid 1px #ccc;
display: inline-block;
letter-spacing: normal;
font-size: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
}
Musisz jednak wiedzieć, że taki zabieg sprawi, że arkusz CSS nie będzie się poprawnie walidował w standardzie W3C. Kod wygląda następująco:
.element {
*display: inline;
*margin: 0 20px 0 20px;
}
O autorze
