활성 영역에서

Question

나는 일반적으로 텍스트뿐만 아니라 버튼의 모든 div를 만들기 위해 링크에 표시 블록을 넣습니다. 하지만이 경우에는 ulli에 display:inline-block을 사용해야하며 다른 디스플레이 블록을 사용하지 않도록 설정 했습니까? li을 모두 활성화하고 텍스트를 내부에 넣는 방법은 무엇입니까? 여기

은 예입니다 http://jsfiddle.net/mPGDe/

HTML :

<ul class="menu"> 
    <li><a href="#">first</a></li> 
    <li><a href="#">second</a></li> 
    <li><a href="#l">third</a></li> 
</ul> 

CSS :

ul { 
    margin:40px auto; 
    list-style-type:none; 
    padding:0; 
    text-align: center; 
} 

ul li { 
    position: relative; 
    padding: 7px 17px; 
    margin-right: 10px; 
    background-color: #f2f2f2; 
    display: inline-block; /* does it disable display block? */ 
} 

ul li a { 
    display:block;/* usually to make active all the zone, but here it does not work */ 
} 

Answer 1

가 li

ul li { 
    position: relative; 
    margin-right: 10px; 
    background-color: #f2f2f2; 
    display: inline-block; /* does it disable display block? */ 
} 

ul li a { 
    padding: 7px 17px; 
    display:block;/* usually to make active all the zone, but here it does not work */ 
} 

대신 a에 패딩을 넣어

데모 : http://jsfiddle.net/gaby/mPGDe/1/