2011-01-16 6 views
34

나는 다음과 같은 코드를 가지고 :HTML + CSS : 'A'폭이 작동하지 않습니다

CSS 부분 :

<style type="text/css"> 
    .menu 
    { 
     width:200px; 
    } 

    .menu ul 
    { 
     list-style-image:none; 
     list-style-type:none; 
    } 

    .menu li 
    { 
     margin:2px; 
    } 

    .menu A 
    { 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    } 

    .menu A:link 
    { 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    } 
</style> 

HTML 부분 :

모든 것이 잘 작동하지만, 내가 추가 할 때 HTML 문서 시작 부분의 'DOCTYPE'요소는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

'a'요소의 너비는 고려되지 않습니다.

질문 1 : 왜?

질문 2 : 어떻게 해결할 수 있습니까?

고맙습니다.

답변

88

질문 1 : 이유는 무엇입니까?

기본적으로 block element이 아니기 때문에

질문 2 : 문제를 해결하는 방법은 무엇입니까?

display: block;을 사용하는 블록 요소 또는 display: inline-block; 의한 인라인 블록 확인.

+1

사람 와우 display: inline-block;를 사용하여 같은 줄에있을 HTML과 CSS 코드에서 소문자를 사용 단지 나에게 두통의 톤을 저장! 앵커 태그의 폭을 조정할 수없는 이유를 알 수 없었습니다. – imjp

+0

http://bit.ly/1QQi3Rd 좋은 답변입니다. – Luis

1

링크는 기본적으로 인라인 요소입니다. display: block;을 추가하면 설정된 너비가 사용됩니다.

1

CSS는 모두 핵심입니다. 속성은 이에 따라 자리를 대신합니다. 그 문제에 관해서는 Google University's을 보아라. 이것은 기초와 그 이상을 이해하는데 많은 도움이 될 것입니다. A의

2

추가 디스플레이 블록 : 앵커 태그에 대한

.menu A 
    { 
     display: block; 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    } 
4

메이크업 블록 스타일로 display:block를 추가

.menu a 
{ 
    display:block; 
    height:25px; 
    width:170px; 
    background:url(./images/button-51.png); 
    padding:2px 5px ; 
} 

참고 : repet .menu a:link 클래스의 모든 요소가 .. 단지 변경을 추가 해달라고하거나 새로운 스타일. 참고 : 항상

1

이 나를 위해 일하지만, 내가 원하는 이후 내 모든 링크는 내가

0
.menu A 
    { 
     float: left; 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    } 
관련 문제