ProgramingTip

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

bestdevel 2020. 10. 13. 08:09
반응형

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


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: blocka,하지만 링크가 블록 요소처럼 행동을 시작하기 때문에 그것은 다른 문제가됩니다. 어떤 float: left사람들에게 나란히있는 주는 것 입니다.


높이정의에서 :

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

a소자는 기본적으로 인라인 요소 (그리고 대체되지 않음)입니다.

(디스플레이 속성을 사용하여 직접 또는 간접적으로 (예 : 부동)).


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

디스플레이 : 인라인 블록으로 변경; 그 문제를 해결합니다. – RandomUs1r '13 년 5 월 14 일 21:59

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

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

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

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

너비 : 100 %;

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

참고 URL : https://stackoverflow.com/questions/5990223/how-to-set-alink-height-width-with-css

반응형