Selektor pierwszego i ostatniego wbudowanego bloku w nowej linii

Question

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.

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?

Answer 1

Nie ma sposobu na CSS. Dodałem the JavaScript solution in your fiddle.

Aby obejść ten problem, można przypisać stałe szerokości procentowe do elementów listy i użyć zapytań o media CSS w celu zwiększenia/zmniejszenia szerokości w zależności od rozmiaru ekranu. W ten sposób będziesz wiedzieć, ile dokładnie elementów pasuje do linii, co z kolei pozwala na stylizowanie określonych elementów. SASS może ułatwić pisanie powtarzających się CSS. Szorstki szkic (otwarty cała strona i rozmiaru przeglądarkę):

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    margin-bottom: .5em; 
 
    border: thin solid #EEE; 
 
    padding: 1em; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    background-color: #CEF; 
 
} 
 
li:first-child { 
 
    border-top-left-radius: 1em; 
 
    border-bottom-left-radius: 1em; 
 
} 
 
li:last-child { 
 
    border-top-right-radius: 1em; 
 
    border-bottom-right-radius: 1em; 
 
} 
 
@media (min-width: 600px) and (max-width: 799px) { 
 
    /* 4 items per row */ 
 
    li { 
 
    width: 25%; 
 
    } 
 
    /* match 4, 8, 12, ...*/ 
 
    li:nth-child(4n+4) { 
 
    border-top-right-radius: 1em; 
 
    border-bottom-right-radius: 1em; 
 
    } 
 
    /* match 5, 9, 13, ... */ 
 
    li:nth-child(4n+5) { 
 
    border-top-left-radius: 1em; 
 
    border-bottom-left-radius: 1em; 
 
    } 
 
} 
 
@media (max-width: 599px) { 
 
    /* 3 items per row */ 
 
    li { 
 
    width: 33.3333%; 
 
    } 
 
    /* match 3, 6, 9, ... */ 
 
    li:nth-child(3n+3) { 
 
    border-top-right-radius: 1em; 
 
    border-bottom-right-radius: 1em; 
 
    } 
 
    /* match 4, 7, 10, ... */ 
 
    li:nth-child(3n+4) { 
 
    border-top-left-radius: 1em; 
 
    border-bottom-left-radius: 1em; 
 
    } 
 
}

<ul> 
 
    <li>Praesent ultricies libero</li> 
 
    <li>Aenean in velit vel</li> 
 
    <li>Ut consequat odio</li> 
 
    <li>Integer convallis sapien</li> 
 
    <li>Fusce placerat augue</li> 
 
    <li>Vestibulum finibus nunc</li> 
 
    <li>Nulla consectetur mi</li> 
 
    <li>Ut sollicitudin metus</li> 
 
    <li>Maecenas quis nisl sit</li> 
 
    <li>Vivamus eleifend justo</li> 
 
    <li>Duis ut libero pharetra</li> 
 
</ul>

Answer 2

Czy to możliwe, aby uzyskać selektora dla pierwszego i ostatniego elementu inline-block, który działa na nowej linii lub czy są jakieś inne (nie javascript) zbliża się do tego efektu?

Nie, nie ma takich selektorów. CSS nie zapewnia dostępu do informacji o tym, gdzie linie się łamią (z ograniczonym wyjątkiem pseudoelementu :first-line). Nie, nie ma innych podejść niezwiązanych z JavaScriptem dla tego efektu.

Jeśli chcesz korzystać z JS, możesz dokonać iteracji po elementach, gdy układ może się zmienić, sprawdzić położenie każdego z nich w stosunku do kontenera nadrzędnego, ocenić, czy jest on skierowany w lewą lub prawą stronę, następnie zastosuj promień obramowania.

Innym możliwym rozwiązaniem JS jest wykonywanie własnych obliczeń przełamywania linii poprzez gromadzenie szerokości i ustalanie, gdzie musi nastąpić przerwa.

Możesz chcieć zbadać biblioteki, takie jak Kamieniarstwo, aby sprawdzić, czy udostępniają one haki umożliwiające uzyskanie dostępu do konfiguracji układu wewnętrznego, co może ułatwić to.