CSS로 a : link 높이 / 너비를 설정하는 방법은 무엇입니까?

84

a내비게이션 요소의 높이와 너비를 설정할 수 없습니다 .

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

내가 뭘 잘못하고 있는지 아이디어가 있습니까?

html css

— 찬성
소스

194

디스플레이 추가 : 블록;

a-tag는 인라인 요소이므로 높이와 너비가 무시됩니다.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

— Stijn Janssen
소스

24

블록은 요소 뒤에 새 줄을 만드는 부작용이 있습니다.

— Cobra_Fast

27

앵커는 높이를 사용하기 위해 기본값과 다른 표시 유형이어야합니다. display:inline-block;또는 display:block;.

또한 line-height이것으로 흥미로운 것을 확인하십시오 .

— Cobra_Fast
소스

4

line-height도 훌륭한 솔루션입니다. 그러나 링크의 텍스트가 두 줄을 넘을 때 두 줄 사이의 공백은 엄청납니다.

— Stijn Janssen

8

귀하의 문제는 아마도 a요소가 display: inline본질적으로 있다는 것입니다 . 인라인 요소의 너비와 높이를 설정할 수 없습니다.

당신은 설정해야 할 것입니다 display: block온 a,하지만 링크가 블록 요소처럼 행동을 시작하기 때문에 그것은 다른 문제를 가져올 것이다. 그것에 대한 가장 일반적인 치료법은 float: left그들이 어쨌든 나란히 정렬되도록 주는 것 입니다.

— 페카
소스

1

플로팅하면 부모 요소가 주변으로 확장되지 않을 수 있습니다.

— Cobra_Fast

@Cobra yup,하지만 쉽게 고쳐집니다. 2011 년에는 clearfix가 필요합니까?

— Pekka

1

그럼 여기서 수정해야하나요? 그다지 잘 들리지 않습니다.

— Cobra_Fast

5

높이 의 정의에서 :

적용 대상 : 모든 요소 (대체되지 않은 인라인 요소, 테이블 열 및 열 그룹)

a소자는 기본적으로, 인라인 요소 (그리고 그것이 대체되지 않은).

디스플레이를 변경해야합니다 (디스플레이 속성을 사용하여 직접 또는 간접적으로 (예 : 부동)).

— 쿠엔틴
소스

4

이 관찰에 대해 RandomUs 1r에게 감사드립니다.

display : inline-block으로 변경; 그 문제를 해결합니다. – RandomUs1r '13 년 5 월 14 일 21:59

다음과 같이 상단 탐색 메뉴 모음에 대해 직접 시도했습니다.

먼저 다음과 같이 "li"요소의 스타일을 지정합니다.

디스플레이 : 인라인 블록;
너비 : 7em;
텍스트 정렬 : 가운데;

그런 다음 "a"> 요소의 스타일을 다음과 같이 지정하십시오.

너비 : 100 %;

이제 탐색 링크는 각 링크의 중앙에 텍스트가있는 동일한 너비입니다.

— user123318
소스