Check out the setup I have here: http://jsfiddle.net/9F6CF/
In this scenario, there is a list containing anchors within each list item. The UL element has a specific width and an overflow set to auto, causing text in the anchors to scroll horizontally if it extends beyond the UL's width.
Although all elements are configured with block-level displays, the anchors only conform to the defined width of the UL rather than expanding to encompass their content entirely. As a result, any background or border styles applied to the LIs or anchors within the overflow region are lost.
Is there a way to make the anchors wrap around the full width of their contents without explicitly setting widths for each anchor?
Example Markup:
<ul class="menu">
<li><a href="#">0000000436274637264378234</a></li>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
Corresponding CSS:
.menu {
display: block;
width: 180px;
overflow: auto;
background-color: #eee;
margin: 0px;
padding: 0px;
}
.menu li {
display: block;
background-color: #fff;
border-top: 1px solid #ccc;
margin: 0px;
padding: 0px;
}
.menu li a {
display: block;
padding: 5px;
}