Làm thế nào để đặt a: link height / width với css?

84

Tôi chỉ không thể đặt chiều cao và chiều rộng của acác phần tử trong điều hướng của mình.

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

Bất kỳ ý tưởng những gì tôi đang làm sai?

html css

— Ủng hộ
nguồn

194

thêm display: block;

a-tag là một phần tử nội tuyến nên chiều cao và chiều rộng của bạn bị bỏ qua.

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

— Stijn Janssen
nguồn

24

Block có tác dụng phụ là nó sẽ tạo ra một dòng mới sau phần tử.

— Cobra_Fast

27

Neo sẽ cần phải là kiểu hiển thị khác với kiểu hiển thị mặc định của chúng để có chiều cao. display:inline-block;hoặc display:block;.

Cũng kiểm tra xem line-heightđiều gì có thể thú vị với điều này.

— Cobra_Fast
nguồn

4

line-height cũng là một giải pháp tuyệt vời. Nhưng khi văn bản trong liên kết sẽ vượt quá 2 dòng thì khoảng trắng giữa 2 dòng đó là rất lớn.

— Stijn Janssen

8

Vấn đề của bạn có lẽ là acác yếu tố display: inlinetự nhiên. Bạn không thể đặt chiều rộng và chiều cao của các phần tử nội tuyến.

Bạn sẽ phải đặt display: blocktrên a, nhưng điều đó sẽ mang lại các vấn đề khác vì các liên kết bắt đầu hoạt động giống như các phần tử khối. Cách chữa bệnh phổ biến nhất là cho họ đi float: leftxếp hàng cạnh nhau.

— Pekka
nguồn

1

Việc thả nổi chúng có thể sẽ ngăn phần tử gốc của chúng mở rộng xung quanh chúng.

— Cobra_Fast

@Cobra yup, nhưng điều đó được khắc phục dễ dàng. Trong năm 2011, có cần phải có clearfix không?

— Pekka

1

Vậy chúng ta cần khắc phục sự cố ở đây? Điều đó nghe có vẻ không tốt lắm.

— Cobra_Fast

5

Từ định nghĩa của chiều cao :

Áp dụng cho: tất cả các phần tử trừ các phần tử nội tuyến không thay thế, cột bảng và nhóm cột

Một aphần tử, theo mặc định là một phần tử nội dòng (và nó không thể thay thế).

Bạn cần thay đổi hiển thị (trực tiếp với thuộc tính hiển thị hoặc gián tiếp, ví dụ: với float).

— Quentin
nguồn

4

Cảm ơn RandomUs 1r về quan sát này:

thay đổi nó thành display: inline-block; giải quyết vấn đề đó. - RandomUs1r ngày 14 tháng 5 '13 lúc 21:59

Tôi đã tự mình thử nó cho thanh menu điều hướng trên cùng, như sau:

Đầu tiên định kiểu phần tử "li" như sau:

display: inline-block;
chiều rộng: 7em;
text-align: center;

Sau đó, tạo kiểu cho phần tử "a"> như sau:

chiều rộng: 100%;

Bây giờ các liên kết điều hướng đều có chiều rộng bằng nhau với văn bản được căn giữa trong mỗi liên kết.

— user123318
nguồn