当一个子元素水平溢出时，为什么父项的正确填充被忽略？

鉴于这种简单的结构：当一个子元素水平溢出时，为什么父项的正确填充被忽略？

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

这个CSS：

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

#child { 
    width: 500px;  
}

现场演示：http://jsfiddle.net/523me/5/

注意，家长有一个20px填充和孩子水平溢出（因为它更宽）。如果将父级一直滚动到右侧，您会看到子级触及父级的右侧边缘。

所以，父母应该有一个正确的填充，但它被忽略。看起来，当孩子有固定的宽度时，父母的正确填充不适用。（这是由一个标准指定的？我想知道，请让我知道，如果你发现任何东西！）

有没有办法强制正确的填充应用在这种情况下没有必须删除任何来自流动的元素（通过浮动还是定位）？

enter image description here

截图1 - 正确的填充被忽略。这是所有当前浏览器的行为。

截图2 - 正确的填充适用。这是我想要完成的。（顺便说一句，屏幕截图是从IE7，这是不忽略右填充的浏览器。）

来源

2012-04-07 Šime Vidas

你从this问题的痛苦。

我将给予保证金孩子（而不是填充到父）解决它：

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

#child { 
    width: 500px; 
    background: yellow; 
    display: inline-block; 
    margin: 20px; 
}

演示：jsFiddle

来源

2012-04-07 14:30:37 Joao

有趣的是，它需要'inline-block'来工作，因为'block' [不这样做]（http：// jsfiddle。 net/fwTAS/1 /），但人们会认为它会。显示研究的链接为+1。 – ScottS 2012-04-07 14:46:00

@ScottS是的，它是那些该死的浏览器，它们都有自己对CSS规范的解释，尽管它们试图维护它（除了非标准的流氓混乱，即IE）。 'block'和它的好友'inline-block'应该共享他们所有的盒子模型特性，并且只能通过inline-block的方式来区分页面流和混合内联的东西。我当然想知道更多关于这个特定行为的信息。 – 2012-04-07 15:00:02

@Jota'显示：内联块风险有两个小内容的孩子并肩出现：http://jsfiddle.net/523me/20/从我也为链接。 – 2012-04-07 15:02:33

说不上但加入：

#child{ 
    display: inline-block; 
}

似乎解决它：http://jsfiddle.net/523me/6/

I” ve只在最新的Chrome中测试，可能不是跨浏览器

来源

2012-04-07 14:15:10 stephenmurdoch

，在Chrome和IE不能在Firefox'工作，但：（' – 2012-04-07 14:21:36

）如果我没有弄错，内嵌块用于直接/嵌入文本（或内联元素），混合它，所以父块可能会解决它，因为它会*常规文本*，并且相对于它来说，parent padding明显是20px，但这更像是一种黑客行为，这就是为什么它在Firefox中不起作用，它的用法是针对特定的logica l这种布局更可取的情况。 – 2012-04-07 14:29:02

您可能会将填充更改为边框。

padding: 20px;

到

border: 20px solid gray;

来源

2012-04-07 14:17:32

边框包装滚动条，看起来不太好：http://jsfiddle.net/523me/17/ – 2012-04-07 14:50:11

我同意，我没有看到你的截图，直到我说，... – 2012-04-10 18:29:07

无，填充不会被忽略，但它仍然是在父里面。

请参阅updated jsFiddle，您可以在其中看到填充没有从原始位置移开。

编辑：嗯，有一些异常。如果你给内部div一个正确的边距，那也会被忽略。嗯。 Upvoting你的问题。

来源

2012-04-07 14:17:59

我看到你意思。嗯，这是事实，但我不喜欢它。如果父母的填充包裹在最宽的孩子身上，我会更高兴，而不是只应用于那些没有固定宽度的孩子。 – 2012-04-07 14:26:51

应用填充右满溢元素本身和移动背景的直接子元素。

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

<style> 
#parent {padding-right: 0; } 
#child {padding-right: 20px; } 
#child > DIV {background: yellow; } 
</style>

http://jsfiddle.net/523me/9/

来源

2012-04-07 14:29:25

我想避免把每个孩子都包装在一个DIV中...... – 2012-04-07 14:55:09

当一个子元素水平溢出时，为什么父项的正确填充被忽略？

回答

相关问题