li : 떠 다니는 래퍼에서 호버가 너비가 늘어납니다.

Question

혼란스러운 점을 발견했습니다 (Safari 및 Chrome에서만 발생). 모든 바이올린의 첫째 : http://jsfiddle.net/k8ypwqbd/

<ul> 
    <li>Item 1</li> 
    <li>Item 2 Item 2</li> 
</ul> 

ul { 
    float: left; 
    color: red; 
    border: 1px solid black; 
} 
ul li:hover { 
    background-color: green; 
} 

첫 번째 리튬 요소를 가져한다면, 아무것도 (녹색 배경 색 제외) 발생하지 않습니다. 두 번째 li 요소 (가장 넓은 요소)를 가져 가면 목록의 너비가 늘어납니다 (내 의견으로는) 이유가 없습니다. 그리고 나머지 시간 동안 그 너비가 유지됩니다.

나는 왜 그런 일이 일어나는 지 잘 모릅니다. 그게 버그 야?

Answer 1

내 해결 방법은 지금까지 부동 요소를 고정 폭을 제공하는 것입니다 : 여기

는 스크린 샷입니다.

ul { 
    float: left; 
    color: red; 
    border: 1px solid black; 
    width: 150px; 
} 

동적 너비에 대한 또 다른 해결책이 있습니까?