Мне невероятно сложно достичь следующего эффекта:
==========================================================
= 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.
Это "невероятно сложно" обойтись без <table> или display: table.. пока вы не знаете, как это сделать!
Смотрите: http://jsfiddle.net/thirtydot/aLgwt/
Это работает в IE7 и выше + во всех современных браузерах.
dt {
float: left
}
dd {
overflow: hidden;
padding: 0 4px 0 9px
}
dd input {
width: 100%
}
Объяснение, почему оно работает здесь.
BTW, если вы хотите, чтобы правый столбец был исправлен, но левый с автосогласованием, вы можете изменить этот шаблон на:
CSS
dt {
float: right;
}
dd {
overflow: hidden;
padding: 0 4px 0 9px;
}
dd input {
width: 100%
}
Обратите внимание, что label должен следовать до input в любом случае.