Câu hỏi định vị CSS - Bảng so với tuyệt đối so với DL

Question

Tôi muốn căn chỉnh các cặp nhãn/giá trị ở giữa bằng cách sử dụng CSS mà không sử dụng vị trí hoặc bảng tuyệt đối (xem ảnh chụp màn hình). Trong ảnh chụp màn hình đó, tôi định vị giá trị (ví dụ: $ 4,500/wk) tuyệt đối và sau đó thả nhãn lên ngay trên nó. Nhưng tuyệt đối không hoạt động tốt trong IE và tôi đã nghe nó không phải là một kỹ thuật tốt.

Nhưng làm thế nào tôi có thể đạt được hiệu ứng này trong đó các nhãn là tất cả các quyền hợp lý mà không tuyệt đối?

alt text http://www.amherstparents.org/files/shot.jpg

Answer 1

Tôi đang bối rối, những gì có tính bảng về dữ liệu đó? Các hồ sơ ở đâu? Hàng của các lĩnh vực khác nhau không thực sự làm cho một bảng theo nghĩa truyền thống. (Cũng không hack nó để có hai hồ sơ mỗi hàng cho rằng vấn đề)

Nếu chúng ta đang giải trí ý tưởng này, thì sự khác biệt giữa nửa bên trái của bảng và bên phải là gì? Tiêu đề cột sẽ là gì nếu có?

Tôi thích đề xuất danh sách định nghĩa, nó chắc chắn phù hợp hơn so với bảng. Và bạn sẽ không cần hai cột nếu tất cả các DT và DD bị trôi nổi: trái và chiều rộng: 25%, và theo thứ tự sau: Chi phí, Vật nuôi, Ngủ, Hút thuốc, v.v ... Vì vậy bạn có thể sử dụng 1 danh sách định nghĩa, vì nó thực sự phải như vậy.

Mặc dù có thể bạn sẽ cần rõ ràng: để lại mọi DT khác chỉ trong trường hợp nội dung của bất kỳ yếu tố nào trong số này kết thúc tốt đẹp trên hai dòng.

<style> 
    dl 
    { 
     float:left; 
     width:100%; 
    } 
    dt, 
    dd 
    { 
     float:left; 
     width:24%; 
     margin:0; 
     padding:0; 
    } 
    dt 
    { 
     text-align:right; 
     padding-right:.33em; 
    } 
    dd 
    { 
     text-align:left; 
    } 
</style> 
<dl> 
    <dt>Cost:</dt> 
    <dd>$4,500/wk</dd> 
    <dt>Pets:</dt> 
    <dd>No</dd> 
    <dt>Sleeps:</dt> 
    <dd>1</dd> 
    <dt>Smoking:</dt> 
    <dd>No</dd> 
</dl> 

Answer 2

Nếu bạn đang hiển thị dữ liệu dạng bảng không có sự xấu hổ trong việc sử dụng một bảng.

Answer 3

Sử dụng div chiều rộng cố định với thuộc tính CSS text-align. Đừng quên nổi các div của bạn.

Answer 4

Hãy nói rằng bạn đang sử dụng DL, DT và DD:

<dl> 
<dt>Cost:</dt> 
<dd>$4,500/wk</dd> 
<dt>Sleeps:</dt> 
<dd>1</dd> 
</dl> 

Bạn có thể sử dụng CSS xấp xỉ sau (chưa được kiểm tra):

dl { width: 200px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; } 

Edit: Theo Chris Marasti-Georg chỉ ra :

Ngoài ra, nếu bạn muốn 2 cột, sử dụng 2 danh sách định nghĩa và thả nổi

Answer 5

@jon là đúng, nếu dữ liệu dạng bảng, bạn có thể sử dụng bảng. Tuy nhiên, nếu bạn thực sự không muốn sử dụng một bảng, tôi nghĩ rằng đây là những gì bạn muốn:

CSS

.label { 
    min-width: 20%; 
    text-align: right; 
    float: left; 
} 

HTML

<div class="pair"> 
    <div class="label">Cost</div> 
    <div class="value">$4,500/wk</div> 
</div> 
<div class="pair"> 
    <div class="label">Sleeps</div> 
    <div class="value">1</div> 
</div> 
<div class="pair"> 
    <div class="label">Bedrooms</div> 
    <div class="value">9</div> 
</div> 

EDIT @ Chris Marasti-Georg chỉ ra rằng các danh sách định nghĩa sẽ phù hợp hơn ở đây. Tôi đồng ý, nhưng tôi đoán tôi muốn chứng minh rằng điều tương tự có thể dễ dàng thực hiện với bất kỳ phần tử cấp khối nào và không có gì trong danh sách định nghĩa mặc định cần thiết để hoàn thành mục tiêu này.

Answer 6

Cách sử dụng bảng để bố cục bảng và sau đó sử dụng CSS để định vị bảng đó bất cứ nơi nào bạn muốn trên trang của mình?

Answer 7

Mở rộng trên bài Rahul của:

CSS

#list { width: 450px; } 
#left { float: left; background: lightgreen; } 
#right { float: right; background: lightblue; } 
dl { width: 225px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; padding-left: 5px; } 

HTML

<div id="list"> 
    <dl id="left"> 
     <dt>Cost:</dt> 
     <dd>$4,500/wk</dd> 
     <dt>Sleeps:</dt> 
     <dd>1</dd> 
     <dt>Bedrooms:</dt> 
     <dd>9</dd> 
     <dt>Baths:</dt> 
     <dd>6</dd> 
    </dl> 
    <dl id="right"> 
     <dt>Pets:</dt> 
     <dd>No</dd> 
     <dt>Smoking:</dt> 
     <dd>No</dd> 
     <dt>Pool:</dt> 
     <dd>No</dd> 
     <dt>Waterfront:</dt> 
     <dd>No</dd> 
    </dl> 
</div> 

Tôi thử nghiệm này dưới FF 3.0.1, IE6 và IE7. Màu nền đơn giản chỉ để giúp bạn hình dung nơi các cột bắt đầu và kết thúc.

Answer 8

Lưu ý nhanh về việc triển khai thực hiện điều này bằng cách sử dụng bảng, có một số cấu trúc sẽ làm cho số lượng này có thể truy cập được. Cách đơn giản nhất là sử dụng TH cho các nhãn và TD cho các giá trị. This site có một cuộc thảo luận thú vị và đi sâu hơn vào những thứ như tiêu đề cho các ô, v.v.

Answer 9

Tôi luôn coi danh sách định nghĩa như được sử dụng để định nghĩa các mặt hàng, không phải cho cặp khóa/giá trị. (9 không phải là định nghĩa của 'phòng ngủ'). Tuy nhiên, cấu trúc đặc biệt này (danh sách cặp khóa/giá trị) đã gây ra các đối số trong nhiều năm vì không có đánh dấu ngữ nghĩa gốc nào phản ánh đúng.

Tìm DL nếu bạn không phân tích về định nghĩa. Hoặc đi xem bàn. Bảng có cặp khóa/giá trị trong hàng, nếu phạm vi tiêu đề/ô được đặt chính xác, là hoàn toàn hợp lệ. Tôi đã làm điều này gần đây, và nó dường như là đại diện chính xác nhất về ngữ nghĩa.