Làm thế nào để thiết lập thuộc tính chiều cao cho SPAN

Question

tôi cần phải làm cho mã sau đây căng ra với chiều cao được xác định trước

<style> 
.title{ 
    background: url(bg.gif) no-repeat bottom right; 
    height: 25px; 
} 
</style> 

<span class="title">This is title</span> 

Nhưng kể từ khoảng là yếu tố nội tuyến, "height" bất động sản sẽ không hoạt động.

Tôi đã thử sử dụng div thay vào đó, nhưng nó sẽ mở rộng tối đa chiều rộng của phần tử trên. Và chiều rộng phải linh hoạt.

Có ai có thể đề xuất bất kỳ giải pháp tốt nào cho vấn đề này không?

Xin cảm ơn trước.

Answer 1

Đặt mã số display:inline-block trong CSS - điều đó sẽ cho phép nó thực hiện những gì bạn muốn.
Xét về khả năng tương thích: IE6/7 sẽ làm việc với điều này, như chế độ quirks gợi ý:

IE 6/7 chấp nhận giá trị duy nhất trên các yếu tố với một màn hình tự nhiên: inline.

Answer 2

Tại sao bạn cần một khoảng thời gian trong trường hợp này? Nếu bạn muốn tạo kiểu cho chiều cao, bạn có thể sử dụng div không? Bạn có thể thử một div với display: inline, mặc dù điều đó có thể có cùng một vấn đề kể từ khi bạn có hiệu lực được làm điều tương tự như một khoảng.

Answer 3

Sử dụng

.title{ 
    display: inline-block; 
    height: 25px; 
} 

Bí quyết duy nhất là hỗ trợ trình duyệt. Check if your list of supported browsers handles inline-block here.

Answer 4

Giả sử bạn không muốn biến nó thành một yếu tố ngăn chặn, sau đó bạn có thể thử:

.title { 
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */ 
    line-height: 2em; /* or */ 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 

Nhưng giải pháp đơn giản nhất là chỉ cần đối xử với .title là một yếu tố khối cấp, và sử dụng thích hợp các thẻ tiêu đề <h1> thông qua <h6>.

Answer 5

này là làm cho màn hình: công việc inline-block trong tất cả các trình duyệt:

Quirkly đủ, trong IE (6/7), nếu bạn kích hoạt hasLayout với "zoom: 1" và sau đó thiết lập màn hình để nội tuyến , nó hoạt động như một khối nội tuyến.

.inline-block { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
} 

Answer 6

khoảng { display: table-cell; height: (your-height + px); vertical-align: middle; }

Đối với nhịp làm việc giống như một table-cell (hoặc bất kỳ yếu tố khác, cho rằng vấn đề), chiều cao phải được xác định. Tôi đã đưa ra một chiều cao, và họ làm việc tốt - nhưng bạn phải thêm chiều cao để có được họ làm những gì bạn muốn.

Answer 7

Một tùy chọn khác tất nhiên là sử dụng Javascript (Jquery đây):

$('.box1,.box2').each(function(){ 
    $(this).height($(this).parent().height()); 
})