css 盒子嵌套多个盒子如何两端对齐
发布网友
发布时间:2022-04-23 19:42
我来回答
共3个回答
热心网友
时间:2022-04-21 12:56
整体是300px吧?
<style>
ul, li { margin: 0; padding: 0; list-style: none; }
ul { position: relative; width: 300px; height: 100px; background: #aaa; }
li { position: absolute; top: 5px; width: 95px; height: 90px; background: #ddd; }
.left_li { left: 0; }
.middle_li { left: 50%; margin-left: -47.5px; }
.right_li { right: 0; }
</style>
<ul>
<li class="left_li"></li>
<li class="middle_li"></li>
<li class="right_li"></li>
</ul>
追问用div如何实现呢?
追答
无力吐槽 直接贴代码吧
<style>
* { margin: 0; padding: 0; }
.box { position: relative; width: 300px; height: 100px; background: #aaa; }
.col { position: absolute; top: 5px; width: 95px; height: 90px; background: #ddd; }
.left_li { left: 0; }
.middle_li { left: 50%; margin-left: -47.5px; }
.right_li { right: 0; }
</style>
<div class="box">
<div class="col left_li"></div>
<div class="col middle_li"></div>
<div class="col right_li"></div>
</div>
热心网友
时间:2022-04-21 14:14
<style>
ul, li { margin: 0; padding: 0; list-style: none; }
.ul { position: relative; width: 300px; height: 100px; background: #aaa; }
.left_li,.middle_li,.right_li { position: absolute; top: 5px; width: 95px; height: 90px; background: #ddd; }
.left_li { left: 0; float:left; }
.middle_li { left: 50%; margin-left: -47.5px; float:left; }
.right_li { right: 0; float:left;}
</style>
<div class="ul">
<div class="left_li"></div>
<div class="middle_li"></div>
<div class="right_li"></div>
</div>
这样写和你li写的效果是一样的,不知道你要的是不是这个。
热心网友
时间:2022-04-21 15:49
a盒子被套她外面的盒子拉左,c盒子被套她外面的盒子拉右,abc三盒子左浮,最外层一个盒子包住他们