[CSS] Równomierne rozmieszczenie wielu elementów w jednej linii
This post is 16 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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;
}
About the author
