Question

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

/ 我有一个每个li标准文本项目的ul li。该列表是动态的，因此有时每个内容li都小于它所在容器的集合width:100%，但有时li项目的文本会超出宽度：容器的100％。而不是强制文本到下一行，我想保持长文本延伸超过ul。目前，这个工作正常，只有很少的额外的CSS样式到ul。

使用这种方法，我看到一个在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中的任何内容时，它会打破视图，无论是较小的文本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

在您的CSS文件中，移除no-wrap并将break-all添加到li：

.node-list{
    padding-bottom: 2em;
}
.node-list li{
    padding: .15em .5em .15em .35em;
    margin:0;
    border-left: solid 2px transparent;
    word-break: break-all;
}

我认为JS Fiddle是解决方案https://jsfiddle.net/td6szj3o/14/

Answer 2

将sidebar ul设为display: inline-block，然后从width: 100%更改为min-width: 100%

Updated fiddle

Stack snippet

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

当css ul li项目超过ul时，如何匹配ul

2 个答案: