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三盒子左浮，最外层一个盒子包住他们