여러 줄 인라인 요소의 양쪽에있는 불필요한 공간

한 줄 또는 두 줄의 텍스트를 가질 수있는 단추가있는 가로 메뉴가 있습니다. 한 줄짜리 단추를 사용하면 단추 너비가 텍스트 너비와 같습니다. 그러나 여러 줄 버튼을 사용하면 텍스트의 양쪽에 여분의 공백이 추가됩니다.여러 줄 인라인 요소의 양쪽에있는 불필요한 공간

참조 exemple :

menu white space issue

HTML (아무 줄 바꿈와 태그 사이에 공백과 노력, 도움이되지 않았다) :

<ul> 
<li><a href="#"><span>Lorem Ipsum</span></a></li> 
<li><a href="#"><span>Lorem ipsum dolor sit amet</span></a></li> 
<li><a href="#"><span>Lorem Ipsum</span></a></li> 
</ul>

CSS :

li { 
    display: block; 
    float: left; 
    max-width: 100px; 
    background-color: green; 
    text-align: center; 
    border-right: 1px solid #fff; 
    font-size: 0; 
} 
li a { 
    color: #fff; 
    display: block; 
} 
li a span { 
    background-color: red; 
    font-size: 16px; 
}

문제를 설명하는 피들 : http://jsfiddle.net/gxy9fa9w/

물론 이것은 잘 알려진 문제이지만, 시도한 모든 수정이 도움이되지 않았습니다. 스팬을 왼쪽으로두고 부모에 font-size: 0을 입력하고 하위에 음수 박스 섀도우 font-size: 16px을 , span and li ... 문제는 a 요소와 관련이있는 것처럼 보입니다.없이, 스팬을 왼쪽으로 떠서 문제를 해결할 수 있습니다.하지만이 불필요한 공백은 제거 할 수 없습니다.

미리 감사드립니다.

출처

2014-11-19 vard

(뜻 랬 부모 기입하지 않습니다 인라인 요소 태그 사이에 공백이있는 문제), 완전히 다른 문제입니다 :'li' 요소를'100px'의'max-width'로 압축 시켰습니다. 이것은'li' 요소가 여기에 걸리는 너비입니다 왜냐하면 당신이 넣고 싶은 텍스트 내용이 100 픽셀보다 넓기 때문입니다. 물론 텍스트가 깨지기는하지만, 마 법적으로'li' 너비를 더 낮은 값으로 줄이지는 않습니다 ... – CBroe

왼쪽 노트를 떠올 랐기 때문에 사이드 노트에서 li : 디스플레이를 제거 할 수 있습니다. – j08691

CBroe의 의견은 정확합니다. 줄 바꿈 ('
'태그)을 추가하면 더 이상 최대 너비 이상으로 늘어나려고하지 않기 때문에 원하는대로 할 수 있습니다. –

에 걸쳐이 속성을 추가

span{ 
    display:block; 
}

를 스팬 인라인이기 때문에

은 "잘 알려진 문제"함께 할 수 없다

출처

2014-11-19 17:25:36 rejnev

이렇게하면 스팬이 부모를 채우지 만 여분의 공간은 이제 스팬에 있고 빠져 있지 않습니다. – vard

스팬의 기본 아버지 인 리가 최대 너비 = 100 픽셀이므로 스팬이 두 줄로 나누어지고 중간 스팬의 일부 공간이 나타납니다. – rejnev

여러 줄 인라인 요소의 양쪽에있는 불필요한 공간

답변

관련 문제