css - 将子项设置为内容宽度，忽略父项宽度，并使父项滚动

Question

单独使用 CSS，是否可以获得以下示例，http://jsfiddle.net/LdJ7t/ , 事先没有明确知道子元素的宽度？

最终想要的结果:

• 父元素可滚动到子元素
• 子元素的宽度设置为内容

#Parent {
    width: 100px;
    height:200px;
    background: #ccc;
    overflow:auto;
    padding: .5em;
    margin: .5em;
}

#Child {
    width:300px;
    height:100px;
    background:yellow;
}​

<div id="Parent">
    <div id="Child">
        This is a test. This is a test.
    </div>
</div>​

看起来 display:inline-block; 几乎可以工作:http://jsfiddle.net/LdJ7t/1/

我认为这是可能的。我就是找不到解决方案。

Answer 1

您的 inline-block 解决方案是正确的 - 如果您在其中放入较长的单词或图像，则会出现滚动条。默认情况下，文本在空白处断开。

如果您不想在空白处打断文本，您可以将 white-space: nowrap; 添加到子 div，如下所示:http://jsfiddle.net/LdJ7t/2/