CSS để đặt chú thích khóa/giá trị theo chiều ngang.

Tôi đang tạo chú thích nằm ngang trong html/css. Tôi có một hộp màu với một số văn bản bên cạnh nó, sau đó một số không gian, sau đó một hộp màu với một số văn bản, một không gian vvCSS để đặt chú thích khóa/giá trị theo chiều ngang.

[blue] - LabelA [green] - LabelB [red] - LabelC

tôi không thể tìm ra cách để làm trình duyệt chéo này. Tôi đã thử tất cả các kết hợp của divs nổi/nhịp tôi có thể nghĩ đến, nhưng một trong hai nhãn kết thúc lên bên dưới hộp màu hoặc tôi không thể có được padding để làm việc để tách từng phím trong huyền thoại.

Bạn sẽ làm như thế nào?

Nguồn

2011-10-24 Davis Dimitriov

Nó thực sự sẽ giúp đỡ nếu bạn gửi ví dụ làm việc gần nhất của bạn để ai đó có thể hỗ trợ bạn trong việc tìm hiểu làm thế nào để sửa chữa nó. – Whetstone

@Whetstone Tôi thực sự quan tâm hơn đến việc xem cách một người nào đó giải quyết vấn đề này một cách tốt nhất hơn là hack giải pháp của tôi cho đến khi nó hoạt động –

Bạn không cần phao nổi cho loại điều này. Thực sự những gì bạn có là một danh sách các cặp. Có một thẻ đặt cho gọi một definition list:

<dl> 
    <dt>[blue]</dt> 
    <dd> - LabelA </dd> 

    <dt>[green]</dt> 
    <dd> - LabelB </dd> 

    <dt>[red]</dt> 
    <dd> - LabelC </dd> 
</dl>

Đây là những ~~inline~~ block theo mặc định. Từ đó, bạn có thể tạo kiểu cho các cặp thành phần như sau:

<style> 
    dl 
    { 
     width: 200px; 
     background: #fff; 
     border: 1px solid #000; 
     padding: 5px 15px; 
     } 

     dt, dd 
     { 
     display: inline; 
     }  
</style>

Nguồn

2011-10-24 15:35:44

Không, họ thực sự không. Chúng là 'khối'.Tôi đồng ý đây là cách chính xác để đánh dấu nó lên, tuy nhiên. Bạn chỉ cần nhận ra rằng 'display: inline' hoặc' float: left' sẽ là cần thiết. –

@RyanKinal - Bạn đúng. Đã cập nhật. –

Không cần sử dụng div nổi. Hãy thử điều này

DIV.LegendItem 
{ 
    display:inline-block; 
    margin-right:20px; 
}

(thêm chiều rộng và chiều cao nếu DIV không có nội dung)

Xin lỗi nếu văn bản của bạn không có trong hộp cũng thêm này ...

SPAN.LegendText 
{ 
    display:inline-block; 
    margin-right:20px; 
}

Ví dụ here

Nguồn

2011-10-24 15:34:55 musefan

Thử sử dụng một bảng nhỏ và sử dụng màu nền.

<table> 
    <tr> 
    <td style="backgroundcolor:red; width:5px">&nbsp;</td> 
    <td>- Red</td> 
    </tr> 
</table>

Nguồn

2011-10-24 15:36:18

Bàn không bao giờ được sử dụng cho bố trí. –

Tôi dữ liệu của bạn là dữ liệu dạng bảng, thì đây là cách tiếp cận tốt nhất. Nếu không, thì bạn nên tránh điều này, vì nó không phải là ngữ nghĩa. –

Không nên sử dụng bảng cho "bố cục", nhưng anh ấy không nói về bố cục, chỉ hiển thị dữ liệu. Đọc câu hỏi trước khi bỏ phiếu xuống. –

séc ra jsfiddle này và xem nếu điều này là những gì bạn đang tìm kiếm http://jsfiddle.net/CQXk5/

Nguồn

2011-10-24 15:36:20

Dưới đây là một ví dụ đơn giản: http://jsfiddle.net/MTB2q/

enter image description here

Nguồn

2011-10-24 15:38:59 wsanville

ví dụ tuyệt vời, cảm ơn rất nhiều –

Đó là ví dụ thực sự tốt! – Worker

này nên làm việc ...

Tránh phao nổi khi bạn đề cập cụ thể về trình duyệt chéo, vì vậy tôi cho rằng bạn đang ở leas t hỗ trợ IE7. IE7 kết thúc tốt đẹp nổi trong một cách khó chịu đó là lý do tại sao tôi đề nghị divs nội tuyến.

HTML DOCTYPE

<!doctype html> 
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

HTML

<div class="Legend"> 
    <div class="Blue">&nbsp;</div> 
    Blue 
    <div class="Green">&nbsp;</div> 
    Green 
    <div class="Red">&nbsp;</div> 
    Red 
</div>

CSS

.Legend div{ 
    margin-left:15px; 
    width:16px; 
    border:1px solid #808080; 
    display:inline-block; 
} 
.ie7 .Legend div{ 
    display:inline; 
    zoom:1; 
} 
.Red {background-color:red;} 
.Green {background-color:green;} 
.Blue {background-color:blue;}

Nguồn

2011-10-24 15:50:08 Andrew

CSS để đặt chú thích khóa/giá trị theo chiều ngang.

Trả lời

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