Tôi có các vấn đề sau khi sử dụng CSS để tạo kiểu cho các thành phần dl và dt. Tôi thích sử dụng CSS rất cơ bản tương thích với IE6/IE7 và các trình duyệt hiện đại. Tôi đang cố gắng để có được một hiệu ứng, mà với tôi nên được khá đơn giản để đạt được.Tạo kiểu dl và dt bằng CSS để bắt chước bản trình bày dạng bảng giống như
Dưới đây là phiên bản rút gọn của mã nguồn ban đầu tôi đang làm việc với, để cố gắng và làm việc trên chỉ là vấn đề này:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.terms dl {
float: left;
padding-left: 0px;
}
.terms dt, .terms dd {
text-align: center;
margin: 0px;
float: left;
}
.terms dt {
border: solid blue 1px;
clear: left;
}
.terms dd {
border: solid red 1px;
margin-right: 40px;
margin-left: 40px;
}
</style>
</head>
<body>
<div class="terms">
<h1>Terms</h1>
<dl>
<dt>Term 1:</dt>
<dd>Very Long definition for this term here</dd>
<dt>Term 2:</dt>
<dd>Definition for term</dd>
<dt>Term 3 with longer term title:</dt>
<dd>Definition for term</dd>
<dt>Term 4:</dt>
<dd>Definition for term</dd>
<dt>Term 5:</dt>
<dd>Definition for term</dd>
<dt>Term 6:</dt>
<dd>Definition for term</dd>
</dl>
<dl>
<dt>Term 7:</dt>
<dd>Defintion for term</dd>
<dt>Term 8:</dt>
<dd>Definition for term</dd>
<dt>Term 9:</dt>
<dd>Definition for term</dd>
<dt>Term 10:</dt>
<dd>Very Long definition for this term here</dd>
<dt>Term 11:</dt>
<dd>Definition for term</dd>
<dt>Term 12:</dt>
<dd>Definition for term</dd>
</dl>
</div>
</body>
</html>
Đây là kết quả trực quan. Tôi theo kiểu biên giới màu xanh và đỏ để nó được dễ dàng hơn hình dung:
Mục tiêu của tôi là phải có tất cả các "hộp" màu xanh và màu đỏ để có cùng chiều rộng không có vấn đề gì các thiết lập văn bản có kích thước là . Ví dụ. nếu người dùng có một biểu định kiểu mặc định để làm cho văn bản của họ rất lớn, nó sẽ mở rộng cho phù hợp. Vấn đề này không chỉ phát sinh khi mọi người sử dụng tờ kiểu của riêng họ, nó cũng phát sinh trong IE6 khi mọi người chọn "cỡ chữ" khác với "trung bình" - nó làm cho văn bản lớn hơn, và tôi muốn có thể chứa nó.
Tôi không nghĩ rằng tôi muốn đặt độ rộng cứng trên bất kỳ "hộp" nào và tôi không muốn bất kỳ gói văn bản nào hoặc có các phao nổi rơi ra khỏi phong cách hai cột này .
Tôi có thể chỉnh sửa câu trả lời bằng nhiều hình ảnh và ví dụ hơn nếu tôi không đủ rõ ràng.
Ngoài ra, đây là câu hỏi có liên quan nhưng riêng biệt. Nếu cửa sổ trình duyệt được kích thước lại, với một bảng bạn mong đợi một phần của bảng sẽ không còn hiển thị khi bạn giảm chiều rộng. Với thiết lập này, bạn nhận được một kết quả rất lạ và xấu xí như được thấy bên dưới. Làm thế nào điều này có thể tránh được?
CẬP NHẬT
Dường như không có một giải pháp mà không liên quan đến cho nhân cố định chiều rộng đến các yếu tố (và/hoặc một yếu tố Encapsulating). Ngoài ra, có vẻ như thay đổi kích thước văn bản của IE6 chỉ có thể được giải quyết bằng cách đặt văn bản của bạn thành kích thước pixel và không cho phép chúng kích thước lại.
Tại sao bạn không sử dụng bảng? – zgood
Mục đích ngữ nghĩa, đánh dấu đại diện cho một danh sách các thuật ngữ và định nghĩa; không phải dữ liệu dạng bảng. Tôi muốn tách biệt ngữ nghĩa của việc đánh dấu từ phong cách. Theo hiểu biết của tôi, đó là mục đích của phần tử 'dl' và của CSS. – user17753
Bàn không phải là điều xấu xa, tránh được bằng mọi giá. Chúng tốt để hiển thị, bất ngờ, dữ liệu dạng bảng - và nó trông giống như nó sẽ áp dụng trong trường hợp này. – chris