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

Program / 글쓴이

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;
}

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

답변

디스플레이 추가 : 블록;

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

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

답변

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

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

답변

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

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

답변

높이 의 정의에서 :

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

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

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

답변

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

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

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

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

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

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

너비 : 100 %;

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

답변