html - 当 css ul li 元素超出 ul 时，如何匹配 ul 的动态宽度

Question

JSFiddle 问题:https://jsfiddle.net/td6szj3o/

/ 我有一个 ul li，每个 li 都有标准文本项。该列表是动态的，因此有时每个内容 li 小于其所在容器的 width:100% 集，但有时 li 元素的文本会扩展到 width:100% of the容器。我不想将文本强制到下一行，而是想让长文本延伸到 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 的所有组合，当我 float:left ul 或 li 中的任何内容时，这会破坏 View 较小的文本 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)
}

Answer 1

将 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>