학부모 div의 높이가 자녀보다 크다

필자가 정당화 된 수평 navbar를 생성하기 위해 ul 태그와 span 태그를 포함하는 div가 하나 있습니다.학부모 div의 높이가 자녀보다 크다

첫 번째 범위의 텍스트를 정당화하고 싶기 때문에 두 번째 범위는 숨겨진 범위입니다.

그래서 문제는 내가 부모 div'height가 그의 아이들의 키보다 큽니다.

HTML :

<div id="div1"> 
    <ul id="span1"> 
     <li>ABC</li> 
     <li>DEF</li> 
     <li>GHI</li> 
     <li>JKL</li> 
    </ul> 
    <span id="span2"></span> 
</div>

CSS :

#div1 { 
    background-color: red; 
    margin: 0; 
    padding: 0; 
    text-align: justify; 
    height: 15px; 
} 
#div1 ul#span1 { 
    display: inline; 
    background-color: blue; 
} 
#div1 ul#span1 li { 
    display: inline-block; 
} 
#div1 #span2 { 
    display: inline-block; 
    width: 100%; 
    height: 0px; 
    background-color: green; 
}

JSFIDDLE

어떤 제안? 감사!

또 다른 질문 : Horizontal menu

내가 어떻게 할 수있는 : 나는 그런 두 단어 사이에 별도의 원을 추가하려면? 감사!!!

EDIT : 첫 번째 질문에 대해 @ Leth0_에 감사드립니다. 높이를 15px로 변경했는데 효과가있었습니다. 저의 두 번째 질문에 대한 제안을 해주십시오! 감사!! 당신은 추가 시도의 높이를 설정 수동으로 시도 할 수

출처

2014-07-13 Trong Lam Phan

http://jsfiddle.net/7sN24/4/이 전혀 유체 것이 아니라 내가 내 대답에 추가 할 것, 두 번째 질문에 잠깐 해킹 . 나는 이것이 생산 웹 사이트를위한 것이라면 더 유동적 인 soloution 작업을 권하고 싶습니다. 그러나 이것은 단지 자신을위한 것이라면 그렇게 할 것입니다. –

괜찮습니까? –

사실은 아니지만 도움을 받아 올바른 방법을 찾았습니다. 고마워요! http://jsfiddle.net/blck/7sN24/7/ –

... 부모

height:20px.

출처

2014-07-13 01:26:25

예, 작동합니다! 감사! 두 번째 질문에 대한 아이디어를 줄 수 있습니까? –

보십시오이 JSFIDDLE

#div1 { 
    background-color: red; 
    margin: 0; 
    padding: 0; 
    text-align: justify; 
} 
#div1 #span1 { 
    display: inline-block; 
    width:100%; 
    background-color: blue; 
} 

#div1 #span2 { 
    width: 100%; 
    height: 0px; 
    background-color: green; 
}

출처

2014-07-13 01:27:04

학부모 div의 높이가 자녀보다 크다

답변

관련 문제