JSF问题的中部：https://jsfiddle.net/td6szj3o/
/
我有一个ul，每个li都有标准文本项。该列表是动态的，因此有时每个内容li都小于其所在容器的集合width:100%，但是有时li项的文本超出了容器的宽度：100％。而不是将文本强制到下一行，我想使长文本超出ul。目前，可以正常工作，并且对ul几乎没有额外的CSS样式。
使用此方法，我看到一个底部滚动条，该滚动条在ul下面弹出，并允许我向右滚动以查看li内容的其余部分。对我来说很好，我想保留这个。
但是，我遇到了一个问题，试图保持备受欢迎的li背景色，这种背景色非常流行并且通常将大多数数据输出显示在无序列表中。由于位于ul中的li的css是width:100%，而ul本身在width:100%处停止，因此li仅延伸到ul宽度。但是问题是文本延伸超过li时，从技术上讲，它位于ul本身的width:100%之外，因此li的背景色在ul宽度结束的任何地方都停止了。
我试图提供一种适用于所有浏览器的解决方案，它将允许ul将li项目扩展到任何li最长内容的全宽度。我得到的最接近的是使用display:table-header-group，但是不幸的是，当我在li内有小的文本内容时，它不会扩展为width:100%。
我可以简单地在ul中添加min-width:300px或其他内容，这将解决我的问题。但是不幸的是，当用户使用较小的设备或显示器尺寸时，这并不会减少它。当我使用min-width:100%不能解决问题时。我已经使用了我可以想到的display:XXX的每种组合，并且当我
- 或li中的任何内容
float:left时，对于较小的文本ul输出或较长的文本ul输出或两者都破坏了视图同时。任何帮助或指导，将不胜感激。我正在寻找一种适用于所有最新版本的Chrome，FF，Safari等的解决方案；并坚持使用CSS解决方案。
请注意，我有意将css换行了。我不希望文本转到下一行，而是继续在ul上水平显示。
以下是我正在使用的html / css：
<ul>
<li>dynamic li item would be here; nothing crazy</li>
</ul>
.sidebar ul {
position:relative;
max-height:55vh;
min-height:10em;
margin:0;
width:100%;
}
.node-list{
white-space:nowrap;
padding-bottom: 2em;
}
.node-list li{
padding: .15em .5em .15em .35em;
margin:0;
border-left: solid 2px transparent;
max-width:100%;
width:auto;
}
.node-list li a{
color: rgb(73,73,73);
font-weight: bold;
text-decoration: none;
}
.node-list li:nth-of-type(2n){
background-color: rgb(242,242,242)
}
.node-list li:nth-of-type(2n-1){
background-color: rgb(255,255,255)
}
最佳答案
将sidebar ul设置为display: inline-block并从width: 100%更改为min-width: 100%
Updated fiddle
堆栈片段
.sidebar ul {
position: relative;
max-height: 55vh;
min-height: 10em;
margin: 0;
min-width: 100%; /* changed property */
display: inline-block; /* added property */
}
.node-list {
white-space: nowrap;
padding-bottom: 2em;
}
.node-list li {
padding: .15em .5em .15em .35em;
margin: 0;
border-left: solid 2px transparent;
max-width: 100%;
width: auto;
}
.node-list li a {
color: rgb(73, 73, 73);
font-weight: bold;
text-decoration: none;
}
.node-list li:nth-of-type(2n) {
background-color: rgb(242, 242, 242)
}
.node-list li:nth-of-type(2n-1) {
background-color: rgb(255, 255, 255)
}<div class="sidebar">
<ul class="node-list">
<li>Lorem</li>
<li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President Donald Trump asked them to intervene in or downplay the FBI's ongoing Russia investigation, though they said they have never felt pressure to act</li>
<li>Lorem</li>
<li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President Donald Trump asked them to intervene in or downplay the FBI's ongoing Russia investigation, though they said they have never felt pressure to act</li>
<li>Lorem</li>
<li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President </li>
</ul>
</div>关于html - 当css ul li元素延伸超过ul时，如何匹配ul的动态宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44418951/