我想知道如何实现这一目标...
我有类似于jsfiddle中的代码的代码。
我有一个无序列表，带有一个集合max-width（从父级继承），该集合包含许多应具有自动宽度的列表项。我遇到的问题是，当width:auto设置时，该元素符合其父代的max-width属性，并且当width:*length*设置为大于父代max-width属性的特定长度时（即400px在附加的小提琴中），该元素的输出类似于所需的输出，但不完全是所需的。
期望的结果是使列表项具有自动宽度，但不符合父级的max-width属性。列表项应：
position:absolute;）我希望使用纯HTML / CSS解决方案，但是如果需要，我将使用JS / jQuery解决方案
<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;
}
谢谢您的帮助！
PS：很抱歉，如果已经提出此问题，我无法找到它的重复项。如果有现有的答案，那么我很乐意接受它作为答案，或者如果给出的结果完全可以回答该问题，则不愿意删除该问题。
这将使您分得一杯there。空格：nowrap将使所有内容保持一致
#scroll1 li>div {
width:400px;
white-space: nowrap;
overflow:scroll
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句