2011-08-07 3 views
0

메뉴 탭에 인라인 순서없는 목록을 사용하고 있습니다. 나는 리의 높이가 ul보다 큰 것을 볼 수 있습니다. 저는 리의 높이를 ul로 정하고 싶습니다. 누구든지 제발 도와 줄 수 있어요. 같은 번호로 둘을 설정할 수 있습니다, 또는인라인의 높이를 줄입니까?

li { 
    height: inherit; 
} 

: 당신이 세트를 부모 ul의 높이에 li의 높이를 원하시면

+0

포스트 코드 pls는 – fatnjazzy

+0

당신은'li' 요소가 상단과 하단에 패딩을 제로 제공하고, 상단과 하단에 제로 마진을 시도 했습니까? 너 뭐 해봤 니? –

+0

@Ray Toal Tes하지만 작동하지 않습니다. –

답변

0

, 당신은 inherit 기능을 사용합니다 :

ul, li { 
    height: /*insert height*/; 
} 
0
ul { position: relative; } 

li { height: 100%; } 
+0

이 답변과 브라우저의 작동 방식에 대한 세부 정보를 제공하여 개선 할 수 있습니까? – Pindatjuh

0

왜 인라인을 사용합니까 <li>? 당신은 항상 다음과 같이 사용할 수 있습니다 :

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
</ul> 

CSS 코드 :

ul li { 
    display: block; 
    width: 100px; 
    float: left; 
    height: xxxx; //anythin you want here 
} 

해당 솔루션에 대한 유일한 문제는 메뉴 항목의 일정한 폭입니다. 정말 필요한 경우 솔루션은 인라인 블록 CSS 속성입니다.

<html> 
<head> 
<style> 
ul li { 
    background: red; 
    display: inline-block; 
    line-height: 90px; 
} 
ul { 
    background: green; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li><a href="">One</a></li> 
    <li><a href="">Two</a></li> 
    <li><a href="">Three</a></li> 
</ul> 
</body> 
</html> 

너비, 높이, 배경 및 기타 여러 항목을 설정할 수 있지만 요소는 여전히 텍스트 흐름 내부에 있습니다. 이 코드의

미리보기 : http://albitos.eu/~albi/stackoverflow/inline-li-height.html

관련 문제