Welche CSS verhindert eine Überschneidung dieser verschachtelten Listenelemente? - HTML, CSS, HTML-Listen

Bitte betrachten Sie das folgende HTML / CSS als Website. Es zeigt einen Umriss mit Umrandungen anverschiedene Elemente. Die enthaltene Liste erlaubt absichtlich horizontales Scrollen innerhalb einer festen Breite. Das Problem ist, dass wenn Sie ganz nach rechts von der Gliederung scrollen, Sie sehen können, dass die Ränder (alle heißen Farben) der inneren Elemente einander überlappen. Der gewünschte Effekt ist, dass sie alle perfekt bündig (auf der rechten Seite) mit dem enthaltenden Element sind, so dass keine Überlappung auftritt. Was ist das einfachste CSS, um dies zu erreichen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Problem</title>
<style type="text/css">
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
width: 300px !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}
li, span {
padding: 0;
margin: 0;
}
#top {
border: solid 1px black;
}
#top > li {
overflow-x: auto;
overflow-y: hidden;
border: solid 1px yellow;
margin-left: -20px;
}
li {
display: block;
border: solid 1px red;
}
li, ul, span {
width: auto;
white-space: nowrap !important;
}
</style>
</head>
<body>

<ul id="top">
<li id="trunk">
<span>This is the trunk</span>
<ul>
<li><span>This is the first line item</span>
<ul>
<li><span>This is the first subitem</span><ul></ul></li>
<li><span>This is the second subitem</span><ul></ul></li>
<li><span>This is the third subitem</span><ul></ul></li>
</ul>
</li>
<li><span>This is the second line item</span><ul></ul></li>
<li><span>This is the third line item</span><ul></ul></li>
</ul>
</li>
</ul>

</body>
</html>

BEARBEITEN:

Das folgende Bild zeigt eine Beispielskizze.Beachten Sie, dass die Breite fest ist und nach rechts geblättert werden kann, wenn der Benutzer einen Titel eingibt, der länger ist als im sichtbaren Bereich angezeigt werden kann. Beachten Sie, dass das hervorgehobene Element und die untergeordneten Elemente in hellgrau eingefärbt sind. Auf der rechten Seite befinden sich einige orangefarbene Markierungen, die zum Debuggen verwendet werden.

http://drop.io/dfhejyj/asset/outline-png

Das folgende Bild zeigt den gleichen UmrissScrollen nach rechts. Das Scrollen ist beabsichtigt und darf nicht eliminiert werden. Das Problem ist, dass wenn ich nach rechts scrolle, die Titel aus dem UL-Tag herausragen (hellgrau). Ebenso mit den orangefarbenen Markierungen. Der gewünschte Effekt besteht darin, dass die orangefarbenen Markierungen und der graue Bereich immer rechts neben dem Auswahlbereich (durch die Bildlaufleiste begrenzt) verlaufen und dass die Bildlaufleiste immer erhalten bleibt (solange die Titel ausreichend lang sind) um es zu produzieren).

http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png

Die Einschätzung von DigruntedGoat ist genau richtig. Ich benötige jedoch einen korrigierenden Ansatz. Dies könnte wahrscheinlich mit dem defekten Box-Modell des alten IE-Browsers leichter funktionieren.

Antworten:

1 für die Antwort № 1

Sie überschneiden sich jeweils <ul> element ist auf 300px Breite eingestellt, und es hat auch a left-padding Das schafft das "gestufte" Aussehen. Also geht die erste Liste horizontal von 0 bis 300px, während die zweite verschachtelte Liste von 20px bis 320px reicht, und so weiter.

Ich bin mir nicht ganz sicher, welchen Effekt Sie erzielen möchten (vielleicht könnten Sie ein Modell hochladen?), Aber vielleicht setzen Sie die Breite auf das Äußerste <ul> nur (d. h. die #top Selektor) würde tun, was Sie wollen.


1 für die Antwort № 2
li, span {
overflow: hidden;
}

Demo

Dies ist jedoch besser:

#top {
width: 300px !important;
}
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}

Demo


0 für die Antwort № 3

Ich konnte das endlich lösen, indem ich einen zusätzlichen Container hinzufügte:

http://jsbin.com/itevo/2

Danke an Sam H. und DisgruntedGoat, die sich die Zeit genommen haben, eine Anleitung zu geben. :)


Verwandte Fragen
Speisekarte