, wenn ein CSS ul li Artikel Vergangenheit ul erstreckt, wie dynamische Breite eines ul

Question

JSFiddle des Problems zu entsprechen: https://jsfiddle.net/td6szj3o/

/ i mit Standardtextelementen einen ul li pro jedem li habe. Die Liste ist dynamisch, daher ist manchmal jeder Inhalt kleiner als der Satz width:100% des Containers, in dem er sich befindet, aber manchmal hat ein li-Element Text, der über die Breite hinausgeht: 100% des Containers. Anstatt den Text in die nächste Zeile zu zwingen, möchte ich den langen Text beibehalten, der sich über die UL hinaus erstreckt. derzeit funktioniert das gut mit wenig extra css styling an der ul.

mit dieser Methode, ich sehe einen unteren Stellrad, die unter der ul erscheint und ermöglicht es mir, nach rechts zu bewegen, den Rest des li Inhalt anzuzeigen. das ist in Ordnung für mich und ich möchte das behalten.

aber ich bin mit einem Problem eingeführt, das versucht, die alternative Li-Hintergrundfarbe zu behalten, die so populär und häufig Standard mit den meisten Daten ist, die in einer ungeordneten Liste ausgegeben werden. da das css des li, das in der ul sitzt, ist width:100%, und die ul selbst hält an der width:100%, die li erstreckt sich nur so weit wie die ul breite. aber das problem ist, während der text über die li hinausgeht, ist es technisch außerhalb der width:100% der ul selbst, und damit die hintergrundfarbe auf der li stoppt wo auch immer die ul breite endet.

ich versuche, zu einer Lösung zu kommen, die in allen Browsern funktionieren wurden, dass der ul des li Element auf die volle Breite des längsten Inhalts jedes li ermöglicht haben zu verlängern. die nächste, die ich bekommen habe, ist display:table-header-group, aber leider nicht zu width:100% erweitern, wenn ich kleinen Textinhalt in der li haben.

Ich könnte einfach eine min-width:300px oder etwas an die UL hinzufügen, und das würde mein Problem beheben. aber das wird es nicht schneiden, wenn der Benutzer leider auf einem kleineren Gerät oder Monitorgröße ist. wenn ich min-width:100% verwende, löst das das Problem auch nicht. Ich habe jede Kombination von display:XXX, die ich mit kommen kann, und wenn ich float:left alles in der UL oder li, die bricht die Ansicht entweder für die kleinere Text-ul-Ausgabe, oder die längere Text-ul-Ausgabe, oder beides zur gleichen Zeit .

jede Hilfe oder Anleitung zu diesem würde sehr geschätzt werden. Ich suche nach einer Lösung, die in allen neuesten Versionen von Chrome, FF, Safari usw. funktioniert; und haftet an einer CSS-Lösung.

Bitte beachten Sie, dass ich absichtlich das Word-Wrapping von der CSS verlassen habe. Ich möchte nicht, dass der Text in die nächste Zeile springt, sondern stattdessen horizontal über die ul angezeigt wird.

unten ist die HTML/CSS ich verwende:

<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

Set sidebar ul-display: inline-block und Änderung width: 100%-min-width: 100%

Updated fiddle

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

Answer 2

In Ihrem CSS-Datei die no-wrap entfernen und break-all zum li hinzu:

.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, die ich glaube, ist die Lösung https://jsfiddle.net/td6szj3o/14/