Làm cách nào để tạo kiểu cho một thẻ neo trông giống như một nút có cùng độ cao với nút?

Question

Tôi đang làm việc để thay đổi các nút trên trang web của mình để được tạo kiểu theo chủ đề jquery ui. Chủ yếu là mọi thứ đều tốt với nó.

Nhưng có một vài thẻ liên kết mà tôi muốn được tạo kiểu làm nút. Tôi đã thêm các lớp và nó phong cách nó như thế nào tôi muốn nó ngoại trừ chiều cao là không giống nhau. Có cách nào để làm cho thẻ neo theo kiểu có cùng chiều cao với thẻ nút theo kiểu không?

Dưới đây là một số css của tôi:

.mine-button { 
    outline: 0; 
    margin: 0 4px 0 0; 
    padding: 0 1em; 
    height: 2em; 
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative; 
    text-align: center; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px 
} 

Một ví dụ sử dụng nó vào một nút:

<button class="mine-button ui-state-default" 
onclick="stuff here"> 
    <img src="/i_common/basket_add_24.gif" border="0" align="absmiddle"/> Add 
</button> 

Một ví dụ sử dụng nó trên một Achor:

<a class="mine-button ui-state-default" href="bla"> 
    <img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free 
</a> 

Answer 1

này nên làm điều đó:

display: inline-block; 

Lý do khiến chiều cao của bạn không hoạt động là do thẻ neo đánh dấu phần tử nội tuyến. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.

Firefox 2 không hỗ trợ inline-block, nếu bạn vẫn cần phải hỗ trợ nó, nhưng bạn có thể thường get it to work bằng cách thêm một quy tắc display:-moz-inline-boxtrước dòng trên.

Hoặc, bạn có thể thử sử dụng thuộc tính line-height.

Answer 2

biên giới và class đang bị phản đối thuộc tính, hoặc ít nhất là những khoảng trình bày, không phải nội dung và như vậy nên được thực hiện trong CSS, không phải trong mã HTML:

.mine-button { 
    border: 0; 
    vertical-align: bottom/middle/top/whatever; 
} 

Ngoài ra, alt là thuộc tính bắt buộc của phần tử img. Có thể trống (alt = "" cho hình ảnh mặc dù vô nghĩa) hoặc có ý nghĩa (nếu hình ảnh truyền tải thông tin chưa có trong văn bản)