2011-01-20 35 views
99

Có thể đặt chiều rộng và chiều cao bằng pixel trên thẻ neo không? Tôi muốn có thẻ neo để có hình nền trong khi giữ lại văn bản bên trong neo.Đặt chiều rộng và chiều cao trên thẻ A

<li><a href="#">Something</a></li> 

li { 
    width: 32px; 
    height: 32px; 
    background-color: orange; 
} 

li a { 
    width: 32px; 
    height: 32px; 
    background-color: red; 
} 

Trả lời

218

Bạn cần đặt neo của mình display: block hoặc display: inline-block; và sau đó nó sẽ chấp nhận giá trị chiều rộng và chiều cao.

+0

lạ mắt và đơn giản! –

5

Nó không phải là một bản sao chính xác (cho đến nay như tôi có thể tìm thấy), nhưng đây là một common problem.

display:block là những gì bạn cần. nhưng bạn nên read the spec để hiểu tại sao.

63

Bạn cũng có thể sử dụng display: inline-block. Ưu điểm của điều này là nó sẽ thiết lập chiều cao và chiều rộng giống như một phần tử khối nhưng cũng đặt nó nội tuyến để bạn có thể có một thẻ khác ngồi ngay bên cạnh nó, cho phép không gian cha mẹ.

Bạn có thể tìm hiểu thêm về display properties here

+0

Tôi đã tìm kiếm một giải pháp để thiết lập chiều rộng của thẻ neo là nội dung văn bản của nó và không ở một chiều rộng và chiều cao nhất định, do đó, đặt nó thành "inline-block". Cảm ơn. – TheCuBeMan

7

Tất cả những lời đề nghị làm việc trừ khi bạn đặt các neo bên trong một danh sách UL.

<ul> 
    <li> 
     <a>click me</a>> 
    </li> 
</ul> 

Sau đó, bất kỳ quy tắc biểu định kiểu xếp chồng nào sẽ được ghi đè trong trình duyệt Chrome. Chiều rộng trở thành tự động. Sau đó, bạn phải sử dụng các quy tắc CSS nội tuyến trực tiếp trên chính neo đó.

Các vấn đề liên quan