Bitte betrachten Sie das folgende HTML/CSS als Webseite . Es zeigt eine Gliederung mit Rahmen um die verschiedenen Elemente an. Die enthaltende Liste ermöglicht absichtlich einen horizontalen Bildlauf innerhalb einer festen Breite. Das Problem besteht darin, dass sich die Ränder der inneren Elemente (alle in warmen Farben) überlappen, wenn Sie ganz nach rechts blättern. 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. Wie lässt sich dies mit CSS am einfachsten bewerkstelligen?
<!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>EDITAR:
Die folgende Abbildung zeigt ein Beispiel für eine Gliederung. Beachten Sie, dass die Breite festgelegt ist und nach rechts gescrollt werden kann, falls der Benutzer einen Titel eingibt, der länger ist als im sichtbaren Bereich angezeigt werden kann. Beachten Sie, dass das hervorgehobene Element und seine Unterelemente hellgrau umrandet sind. Auf der rechten Seite befinden sich einige orangefarbene Markierungen, die für Debugging-Zwecke verwendet werden.
http://drop.io/dfhejyj/asset/outline-png
Das folgende Bild zeigt denselben Umriss, der nach rechts verschoben wurde. Der Bildlauf ist beabsichtigt und muss nicht beseitigt werden. Das Problem besteht darin, dass beim Scrollen nach rechts die Titel über das enthaltende UL-Tag hinausragen (sie erscheinen in hellgrau). Das Gleiche gilt für die orangefarbenen Markierungen. Der gewünschte Effekt ist, dass die orangefarbenen Markierungen und der graue Bereich immer bündig mit dem rechten Rand des Auswahlbereichs (begrenzt durch die Bildlaufleiste) abschließen und die Bildlaufleiste immer erhalten bleibt (solange einer der Titel lang genug ist, um sie zu erzeugen).
http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png
Die Einschätzung von DigruntedGoat ist genau richtig. Ich brauche jedoch einen korrigierenden Ansatz. Mit dem kaputten Box-Modell des alten IE-Browsers ließe sich das wahrscheinlich leichter bewerkstelligen.
