width100%后子元素margin超出怎么解决?

wgf4242
  • 90

我搜过了,都是说设置box-sizing, 这没border设置了没用。

我现在是把所有的父元素全部margin设置为0来保证width的计算是正确的。有什么好的解决办法?

<style>
.container,.box  {
    width: 100%;
    background-color: black;
}

.box {
    margin-left: 50px;
    background-color: red;
}
</style>
<div class="container">
    <div class="box">我超出了</div>
</div>
回复
阅读 1.8k
4 个回答

// 不给box设置宽度

.container  {
    width: 100%;
    background-color: black;
}

.box {
    margin-left: 50px;
    background-color: red;
}
牛书书
  • 10k

width 100% 这种样式就不该出现在代码里。除非这个元素不在文档流中。
块级元素的默认表现本身就有宽度适应性。

不设置 width
或者用 calc

.box {
    width: calc(100% - 50px);
    margin-left: 50px;
    background-color: red;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏