写一段css样式,给父div设置宽度,循环出来的button超过宽度,自动换行,并且有行高
时间: 2024-05-13 12:14:02 浏览: 110
可以使用 flex 布局来实现,代码如下:
```css
.parent {
display: flex;
flex-wrap: wrap;
width: 300px; /* 父 div 宽度 */
}
.parent button {
flex: 1 0 auto; /* 自适应宽度,不要缩小 */
margin: 5px; /* 按钮之间的间距 */
line-height: 30px; /* 行高 */
}
```
解释一下:
- `display: flex` 将父 div 设置为 flex 布局。
- `flex-wrap: wrap` 设置子元素超出父 div 宽度时自动换行。
- `width: 300px` 设置父 div 宽度。
- `flex: 1 0 auto` 子元素自适应宽度,不要缩小。
- `margin: 5px` 按钮之间的间距。
- `line-height: 30px` 设置行高为 30px。
阅读全文