鉴于这种简单的结构:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

使用此CSS:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Live demo: http://jsfiddle.net/523me/5/

请注意,父对象有20px个填充,子对象水平溢出(因为它更宽).如果将父对象一直向右滚动,您将看到子对象接触到父对象的右边缘.

因此,父级应该有一个正确的填充,但它被忽略了.似乎当子元素有固定的宽度时,父母的正确填充不适用.(这是标准规定的吗?我很想知道.如果你发现了什么,请告诉我!)

在这种情况下,有没有办法强制应用正确的填充,即必须从流中移除任何元素(通过浮动或定位)?

在此处输入图像描述

屏幕截图1-忽略右填充.这就是当前所有浏览器的行为方式.

屏幕截图2-适用右填充.这就是我想要实现的.(顺便说一句,屏幕截图来自IE7,它是唯一不忽略右填充的浏览器.)

推荐答案

你正遭受着this个问题的折磨.

我会通过给子元素留个空白处(而不是给父母一个填充物)来解决这个问题:

body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}
<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>

Css相关问答推荐

在移动设备上touch 屏幕边缘的元素(Material UI)

AngularJS Graphs & Charts - 实线和虚线的混合

CSS 常量()用于什么?

有没有办法让 mui v5 呈现没有 css-xxx 前缀的类名?

具有自动调整大小的自动填充行的 CSS 网格

在 vuetify 中跨 `default.vue` 和 `index.vue` 维护网格系统

Angular 动画的目的是什么?

iPhone X / 8 / 8 Plus CSS 媒体查询

Bootstrap 4:导航内的多级下拉菜单

从 css 到 scss 的 Angular-cli

CSS 网格布局中的等高行

从 javascript 访问 CSS 变量

Flexbox 列自底对齐

Bootstrap 将导航栏项目向右对齐

在 Vuejs 中拥有全局 CSS 的最佳方式

表列大小

找到第一个可滚动的父级

Flex-box:将最后一行与网格对齐

如何在网页上使用 Apple 的新 San Francisco 字体

React.js 内联样式最佳实践