HTML/CSS Hai cột auto-width

Question

Tôi đang gặp một thời gian vô cùng khó khăn để đạt được hiệu ứng sau:

========================================================== 
= Variable Width = <input style="width: 100%" />  = 
========================================================== 

Tôi đang sử dụng mã HTML sau đây:

<dl> 
    <dt> 
    <label>Variable Width</label> 
    </dt> 
    <dd> 
    <input style="width: 100%" /> 
    </dd> 
</dl> 

Xin lưu ý rằng tôi đã cắt bớt HTML để dễ đọc.

Có ai có thể đề xuất CSS nào tôi nên sử dụng để đạt được hiệu ứng này không? Tôi không muốn sử dụng display: table vì tôi đang tìm kiếm khả năng tương thích giữa các trình duyệt đạt đến IE7.

Answer 1

Đây là "vô cùng khó khăn" để thực hiện mà không cần <table> hoặc display: table .. cho đến khi bạn biết cách thực hiện!

Xem:http://jsfiddle.net/thirtydot/aLgwt/

này hoạt động trong IE7 và lớn + tất cả các trình duyệt hiện đại.

dt { 
    float: left 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px 
} 
dd input { 
    width: 100% 
} 

Giải thích lý do tại sao nó hoạt động is here.

Answer 2

BTW, nếu bạn muốn có cột bên phải cố định nhưng một trong những trái với tính năng tự động với bạn có thể thay đổi mô hình này để:

CSS:

dt { 
    float: right; 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px; 
} 
dd input { 
    width: 100% 
} 

Thông báo, rằng label nên hãy theo dõi trước input.