스크롤 목록에서 앵커를 자식의 너비까지 확장하려면 어떻게해야합니까?

Question

여기에 이것을 설정했습니다 : http://jsfiddle.net/9F6CF/

기본적으로 LI에 앵커 목록이 있습니다. UL에는 정의 된 너비와 자동 오버플로가 있으므로 앵커의 텍스트가 UL의 너비보다 넓게 펼쳐지면 가로로 스크롤됩니다.

모든 요소는 블록 레벨 디스플레이로 설정되지만 앵커는 텍스트의 경계를 포함하도록 확장되는 (내가 원하는 것) 것과는 반대로 UL의 정의 된 너비에만 확장됩니다. 따라서 오버플로 영역의 LI 나 앵커에 적용 할 배경이나 테두리 스타일을 잃어 버립니다.

모든 앵커에 명시적인 너비를 설정하지 않고 앵커가 전체 자르기를 감쌀 수있는 방법이 있습니까?

마크 업

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

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; 
} 

Answer 1

.menu li { 
    clear: left; 
    float: left; 
} 

.menu li a { 
    display: inline-block; 
/* display: block; */ 
} 

Updated fiddle