我想要每12个下拉的内容为一行
时间: 2024-03-05 08:55:19 浏览: 17
好的,以下是修改后的 CSS 样式代码:
```css
.date-selector {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.date-selector select {
padding: 10px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 10px;
outline: none;
width: calc(100% / 3); /* 让每个选择框占据父容器的 1/3 宽度 */
}
.date-selector select:nth-child(3n+1) {
margin-right: 0; /* 清除每一行最后一个选择框的右边距 */
}
@media screen and (max-width: 768px) {
.date-selector select {
width: 100%; /* 在小屏幕下让选择框占据整个父容器的宽度 */
margin-right: 0; /* 在小屏幕下清除选择框之间的右边距 */
}
}
```
我主要是增加了一个 `width` 属性来控制每个选择框的宽度,并且使用了 `:nth-child` 选择器来清除每一行最后一个选择框的右边距,使得每 12 个下拉内容为一行。同时,我也增加了一个媒体查询,使得在小屏幕下选择框占据整个父容器的宽度。