nowrap 항목이 상자에 넘쳐 흐름

Question

nowrap 및 목록 항목으로 이상한 동작이 발생합니다. 어떻게 Padding을 크롬에서 "Testing 123"li에 올바르게 적용 할 수 있습니까? (테스트 123의 "3"은 정의 된 너비 밖에 있고 패딩에 침입합니다).

기본적으로 달성하려는 것은 ul이 가장 넓은 li만큼 넓기 때문에 float : left를 사용하는 것입니다. 그러나 동시에 나는 파선 테두리를 유지하고 li 패딩을하고 같은 줄에 각 항목의 텍스트를 유지하려고합니다. 따라서 white-space : nowrap.

HTML :

<ul> 
    <li>Some</li> 
    <li>Content</li> 
    <li>Testing 123</li> 
</ul> 

CSS :

ul { 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding: 10% 15%; 
    border-bottom: 1px dashed #333; 
    list-style-type: none; 
    white-space: nowrap; 
    font-size: 2em; 
} 

http://jsfiddle.net/T9emf/2/

Answer 1

OK, 코멘트에서 연장 :

루트 문제는 ul 자동 폭 편이지만, 브라우저 li 렌더링 올 때 li의 사용 비율 패딩, 그래서, 그것을 어떻게 계산해야한다는 것입니다 많은 실제 패딩은 제공해야하지만 부모에게는 폭 정보가 없으므로 찾을 수 없습니다. 이 바이올린에

: http://jsfiddle.net/T9emf/3/는 반복적으로 온 오프 display:inline-block 및 width:auto를 전환 크롬 DevTools로를 사용하고 다른 크기를 점점 li의를 관찰합니다. 그 이유는 브라우저가 직접 많은 패딩을 결정할 수 없기 때문이며, 나중에 을 결정하려고하므로 레이아웃이 변경 될 때마다 li이 변경 될 수 있습니다.

이 같은 li의 절대 패딩을 제공하는 것이 문제를 하나의 가능한 방법을 수정하려면 :

http://jsfiddle.net/T9emf/4/

ul { 
/* float: left;*/ 
    display:inline-block; 
} 

li { 
    padding: 1ex 1em; 
} 

시각 달콤한 자리를 충족하기 위해 패딩 값을 조정합니다.

em의 위쪽은 폰트 크기에 대한 백분율 단위 바인딩이기 때문에 멋지게 확대하고 축소 할 수 있다는 것입니다.

Answer 2

는 "리"의 스타일에 width:100%; 추가로 문제를 해결할 수. 이유는 "li"요소에 "10"왼쪽 채우기가 있지만 테두리가 텍스트의 정확한 너비로 그려지기 때문입니다. 그런 다음 텍스트가 오버 플로우 된 것처럼 보입니다.