一个div 宽度100% 高度10%,其中包含三个子div横向排列, 第一个子div,背景色蓝色,宽度10%,位置是显示屏水平居中,是element ui的日期选择器,其他两个子div,宽度都是10%,一个背景色黑色,一个背景色灰色 依次水平方向靠右,并且最右边的子div,距离右边距20px, 靠右的两个子div间隔10px,其中子div中间的div 中包含5个按钮水平排列,高度5px 宽度5px;
时间: 2023-09-23 22:02:11 浏览: 48
以下是将您提供的要求转化为 LESS 样式的代码:
```less
.parent {
width: 100%;
height: 10%;
display: flex;
align-items: center;
}
.child-blue {
background-color: blue;
width: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.child-black {
background-color: black;
width: 10%;
margin-left: 10px;
}
.child-gray {
background-color: gray;
width: 10%;
margin-left: 10px;
margin-right: 20px;
}
.button-container {
display: flex;
}
.button {
height: 5px;
width: 5px;
}
```
这段 LESS 样式定义了一个父级容器 `.parent`,它使用了 `display: flex` 来实现子级容器的横向排列。`.child-blue` 使用了 `display: flex`、`justify-content: center` 和 `align-items: center` 来使内容水平居中。`.child-black` 和 `.child-gray` 使用 `margin-left` 来设置水平间距。`.button-container` 使用 `display: flex` 来使按钮水平排列。`.button` 定义了按钮的大小。
请注意,在 HTML 中使用相应的类名,并将 LESS 样式编译为 CSS 使用。