html选择器选第一个结束,html – 新行上第一个和最后一个内联块元素的选择器...

没有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;

}

}

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