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%
}

解释其原因is here。

Answer 2

顺便说一句，如果您想要修复正确的列，但是左侧的列已自动修改，您可以将此模式更改为：

<强> CSS：

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

请注意，label应该在input之前完成。

HTML / CSS两个自动宽度列

2 个答案: