ZBLOG

.momeny-down { width: 100%; height: 50px; line-height: 50px; background: red; ul { list-style: none; display: flex; justify-content: space-between; margin: 0 20px; } }宽度不是百分百 外层盒子是90,如何让内部盒子不占满上级盒子90,而占上上级的百分百

如果你希望内部盒子不占满上级盒子的90%,而是占上上级盒子的百分之百,可以使用相对定位(position: relative)和绝对定位(position: absolute)结合的方法。以下是一个示例代码:

.momeny-down {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: red;
}

.momeny-down ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  
  position: relative; /* 相对定位 */
}

.momeny-down ul li {
   position: absolute; /* 绝对定位 */
   width: 100%; /* 占满父元素宽度 */
}

在这个示例中,.momeny-down 的宽度被设置为90%。然后,我们将内部的 <ul> 元素进行相对定位,并使其左右边距自动居中。

接着,将 <li> 元素进行绝对定位,并设置其宽度为100%,这样就可以让每个 <li> 占满父元素宽度。

通过这种方式,内部盒子就不会占满上级盒子的90%,而是根据上上级容器来进行相应布局。你可以根据具体需求调整代码以适应实际情况。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=18167

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?