不用flex布局如何实现呢
时间: 2023-07-07 07:37:40 浏览: 45
如果不使用flex布局,可以使用以下两种方法实现两个按钮在一个div中水平占满的效果:
1. 使用display: inline-block和text-align: center
HTML:
```
<div class="container">
<button>按钮1</button>
<button>按钮2</button>
</div>
```
CSS:
```
.container {
text-align: center;
}
button {
display: inline-block;
width: 50%;
}
```
这里将父元素的text-align属性设置为center,使得子元素水平居中对齐。同时,将子元素的display属性设置为inline-block,使得它们在一行内并占据宽度的一半。
2. 使用display: table和display: table-cell
HTML:
```
<div class="container">
<div class="cell">
<button>按钮1</button>
</div>
<div class="cell">
<button>按钮2</button>
</div>
</div>
```
CSS:
```
.container {
display: table;
width: 100%;
table-layout: fixed;
}
.cell {
display: table-cell;
text-align: center;
}
button {
display: inline-block;
}
```
这里将父元素的display属性设置为table,将子元素的display属性设置为table-cell,使得子元素在一行内并占据相同的宽度。同时,将父元素的table-layout属性设置为fixed,使得子元素的宽度相等。最后,将子元素的text-align属性设置为center,使得它们水平居中对齐。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)