HTML/CSS两个自动宽度列

Question

我在实现以下效果时遇到了非常困难的时间:

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

我使用以下HTML:

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

请注意,为了便于阅读,我已经删除了HTML.

任何人都可以建议我应该使用什么CSS来实现这种效果？我宁愿不必使用,display: table因为我正在寻找到达IE7的跨浏览器兼容性.

Answer 1

这是"难以置信的困难",没有<table>或display: table......直到你知道如何!

请参阅: http ://jsfiddle.net/thirtydot/aLgwt/

这适用于IE7及更高版本+所有现代浏览器.

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

它的工作原理在这里解释.