html - 仅当子元素的 width 属性超过父元素的 max-width 属性时水平滚动

Question

我想知道这是如何实现的...

我的代码类似于 jsfiddle 中的代码.

我有一个无序列表，它包含一组 max-width(继承自父级)，其中包含许多应具有自动宽度的列表项。我遇到的问题是，当设置 width:auto 时，元素符合其父级的 max-width 属性，当 width:*length* 设置为大于父级的 max-width 属性的特定长度(即附加 fiddle 中的 400px)，元素的输出类似于所需的，但不完全是我们想要的。

期望的结果是列表项具有自动 宽度，但不符合父项的max-width 属性。列表项应该:

1. 宽度等于它提供的内容的总宽度(每个元素未确定)
2. 不是多行(每个元素最多应为 1 行)
3. 不重叠父元素(即使用position:absolute;)
4. 只有在其宽度超过父级的宽度时才可滚动

我更喜欢纯 HTML/CSS 解决方案，但如果需要我会使用 JS/jQuery 解决方案

---

HTML

<div id="scroll1">
    <ul>
        <li>
            <div>I have some text here that is longer than 300px width, but its width is undefined (width can be between 0 and whatever)</div>
        </li>
        <li>
            <div>I have text here less than 300px wide</div>
        </li>
    </ul>
</div>
<div id="scroll2">
    <ul>
        <li>
            <div>I have some text here that is longer than 300px width, but its width is undefined (width can be between 0 and whatever)</div>
        </li>
        <li>
            <div>I have text here less than 300px wide</div>
        </li>
    </ul>
</div>

CSS

#scroll1, #scroll2 {
    max-width:300px;
    margin-bottom:100px;
    overflow:hidden;
}
ul {
    max-width:inherit;
    list-style-type:none;
    padding:0px;
}
li {
    max-width:inherit;
    overflow:auto;
}
li:nth-of-type(even) {
    background-color:#ddd;
}
#scroll1 li div {
    width:auto;
}
#scroll1 li div {
    width:400px;
}

---

感谢您的帮助!

附言如果这个问题已经被问过，我很抱歉，我找不到它的副本。如果那里有现成的答案，我非常愿意接受它作为答案，或者如果给出的结果完全回答了这个问题，我会删除这个问题。

Answer 1

这会让你分道扬镳。 White-space:nowrap 将使所有内容保持在同一行上

#scroll1 li>div {
width:400px;
white-space: nowrap;
overflow:scroll