我正在尝试用动态元素构建导航,可能会以小屏幕大小分为两行,我想要能够对每行上的第一个和最后一个元素进行风格化.
还有一些例子scss在小屏幕尺寸上打破(圆角应该在每一行的第一个和最后一个元素上)：
<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;
}
}
}
有相关的jsfiddle：http://jsfiddle.net/tbw4f23g/1/
解决方法
没有CSS唯一的方式.我加了
the JavaScript solution in your fiddle.
作为解决方法,您可以将固定百分比宽度分配给列表项,并使用CSS媒体查询根据屏幕大小增加/减少宽度.这样你就可以准确地知道多少个物品符合一条线,这样就可以让您对特定元素进行风格化. SASS可以使写作重复性CSS更容易.粗略的轮廓(打开整页并调整浏览器的大小)：
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,... */
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>
