HTML/CSS二自動幅カラム

Question

私は次のような効果達成信じられないほど困難な時期を持っている：

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

はそのIに注意してください。私は、次のHTMLを使用しています

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

を読みやすいように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に従ってください。