Tạo kiểu chữ D để nổi bên trái của DD

Question

Tôi đang cố tạo kiểu danh sách định nghĩa sao cho mỗi dt nổi ở bên trái của các phần tử dd tương ứng của nó. Tôi đã sử dụng:

dt { 
    clear: both; 
    float: left; 
    width: 6em; 
} 
dd { 
    margin-left: 6.5em; 
} 

hoạt động như mong đợi. Nó độc đáo xử lý nhiều phần tử dd trên mỗi văn bản dt và dd đủ dài để mở rộng nhiều dòng.

Tuy nhiên, tôi thực sự muốn để có thể đương đầu với nhiều yếu tố dt mỗi dd (đó là HTML hợp lệ) và dt yếu tố đó là cao hơn so với dd yếu tố tương ứng (do chiều dài của văn bản gây ra dòng để quấn). Tại thời điểm này, kiểu dáng bị tách rời và các phần tử dd tiếp theo không phù hợp với dt của chúng.

Tôi cũng đã thử nhiều thứ khác nhau như thả nổi dd, làm phá vỡ sự liên kết của nhiều phần tử dd. Thêm dd + dd { clear: both; } gần như hoạt động nhưng hiện tại văn bản dài dd nằm dưới dt (chưa kể các trình duyệt cũ hơn không tôn trọng quy tắc).

Có ai đã quản lý để làm điều này không? Tôi thực sự không muốn từ bỏ và sử dụng một cái bàn nhưng có lẽ nó phù hợp.

đánh dấu kiểm tra của tôi là ở đây: http://pastebin.com/nmAQ5Xdm

Answer 1

tôi đã tìm ra một cách để làm điều này khi bạn không nhớ hạn chế chiều rộng của dl yếu tố:

dl { 
    max-width: 30em; 
    overflow: hidden; 
} 
dt, dd { 
    margin-top: 0.5em; 
} 
dt { 
    clear: both; 
    float: left; 
    width: 6em; 
} 
dd { 
    float: right; 
    margin-left: 0.5em; 
    width: 22.5em; 
} 

Nó không hoàn hảo như ngắt kiểu nếu khung nhìn quá hẹp cho dl.

Answer 2

Điều này phù hợp với tôi. Đặt chiều rộng trên dt và thả nó sang trái. Sau đó, để dd là display: block (mặc định) và cho nó một lề trái của cùng một số tiền. Bây giờ dd sẽ quấn ở cùng độ rộng với dt. Việc nổi dt của bạn sẽ tự động xóa tự động block. Bạn có thể điều chỉnh khoảng cách giữa cặp dt/dd bằng cách điều chỉnh margin-bottom của dd.

Nếu bạn có thể có dds trống, sau đó bạn có thể thêm clear: both và margin-bottom vào dt của bạn để nó sẽ kết thúc ở đúng nơi mà không có nội dung dd để đặt nó ở đó.

dt { 
    float: left; 
    width: 8em; 
    clear: both; 
    margin-bottom: 1em; 
} 
dd { 
    margin-left: 8em; 
} 
dd { 
    margin-bottom: 1em; 
}