Próbuję zbudować nawigację z dynamicznymi elementami, które mogą być podzielone na dwie linie przy małych rozmiarach ekranu i chciałbym móc nadać styl pierwszy i ostatni element w każdej linii.Selektor pierwszego i ostatniego wbudowanego bloku w nowej linii
Herezje niektóre przykład SCSS że łamie przy małych rozmiarach ekranu (zaokrąglone rogi powinny być na pierwszym i ostatnim elementem w każdej linii):
<ul>
<li>First page</li>
<li>Second page</li>
<li>Third page</li>
<li>Fourth page</li>
<li>Another example page</li>
<li>This could be the last page</li>
<li>But its not</li>
<li>This is actually the last page</li>
</ul>
ul {
list-style:none;
font-size:0px;
li {
font-size:18px;
display:inline-block;
padding:10px 30px;
border:1px solid black;
margin:10px -1px 10px 0;
&:first-child {
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
&:last-child {
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
}
}
Z dowiemy się z jsfiddle: http://jsfiddle.net/tbw4f23g/1/
Is można uzyskać selektor dla pierwszego i ostatniego elementu wbudowanego bloku, który uruchamia się w nowej linii lub czy istnieją jakieś inne (nie javascript) podejścia do tego efektu?
Dlaczego nie można posłużyć się przykładem, który podałeś? –
Czy możesz dołączyć swój kod HTML, aby inni mogli zobaczyć Twoją składnię? Dzięki :) – Timmah
@AdityaPonkshe Ponieważ ': first-child' oraz': last-child' odnoszą się do pozycji w DOM, a nie do pozycji na linii. –