元素水平方向上的布局溢出问题

为什么两种代码的显示效果不一样呢？

margin-left 是负数就是向左移动。
如果不想超出，可以设置.outer 为overflow: hidden; 超出部分会隐藏
或者width: 700px; 改成 min-width: 700px; 把父div撑大。
 

margin-left 值不一样呀

你拿小盒子包了大盒子肯定装不下会超出啊，设置超出部分隐藏overflow: hidden

首先，inner盒子的宽度比outer盒子的宽度大，div的overflow 默认值为visible（显示），也就是说inner相对outer多出来的部分会被显示出来，想要隐藏设置overflow:hidden即可，还有就是你的inner的margin-left是负的，也就是会把盒子往左边移动，左边部分移动的位置已经超出windows窗口能显示的位置了，肯定会被隐藏，所以你想让inner在outer里面不溢出显示，需要把margin-left去掉，然后还要设置overflow:hidden。

你认为应该是怎么样的效果？

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y