CSS中如何让两个盒子水平一条线呢? div { display: inline-block; vertical-align: middle; } 使用display: inline-block属性可
CSS中如何让两个
div { display: inline-block; vertical-align: middle; }
使用display: inline-block属性可以让两个盒子并排横放,而vertical-align:middle属性可以让它们在水平方向上对齐。此时,盒子之间就会有一条水平线将它们分隔开来。
下面是一个示例代码,我们在HTML中放置两个盒子,并添加上述CSS属性来实现水平对齐的效果。
<div class="box-left"></div> <div class="box-right"></div> .box-left, .box-right { width: 50%; height: 100px; background-color: lightgray; display: inline-block; vertical-align: middle; } .box-left { background-color: lightblue; }
如上代码所示,我们使用了50%的宽度,来使两个盒子平分页面的宽度。在CSS中设置它们的高度和背景颜色,再使用display: inline-block和vertical-align: middle属性来实现盒子的水平对齐。其中,box-left盒子的背景颜色是蓝色的,为了更好的区分两个盒子。
需要注意的是,当使用display: inline-block属性时,元素之间的换行符会产生空格,因此需要在HTML中将它们紧挨着放置或设置font-size为0。
总之,通过使用display: inline-block和vertical-align: middle属性,我们可以轻松地让两个
粉丝
0
关注
0
收藏
0