Please view the following HTML / CSS as a web page . It displays a path with borders around various elements. The containing list intentionally allows horizontal scrolling within a fixed width. The problem is that when you go to the extreme right position of the outline, you can see that the borders (all the hot colors) of the inner elements overlap each other. The desired effect is that they are all completely cleaned (on the right side) with the containing element, so that there is no overlap. What is the simplest CSS for this?
<!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>
EDIT:
. , , , , , . , - . , .
http://drop.io/dfhejyj/asset/outline-png
, . . , , , UL- ( - ). , . , ( ) ( ).
http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png
DigruntedGoat . . , , IE.