私はこの要素を含むページを持っています:
<body>
<div class="C2">
<div class="Ban">
<div class="blockWithLabel position BankCode">
<span>BankCode</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BranchCode">
<span>BranchCode</span>
<br />
<input type="text" style="width:500px"/>
</div>
<div class="blockWithLabel position AccountNumber">
<span>AccountNumber</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position CheckDigits">
<span>CheckDigits</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BankName">
<span>BankName</span>
<br />
<input type="text"/>
</div>
<div class="position validator">
<div class="validator">VALIDATOR</div>
</div>
</div>
</div>
</body>
このスタイルを適用したい:
.Ban { overflow:hidden }
div.blockWithLabel { display:inline-table; overflow:none; }
.C2 { background-color: blue; }
.C2 div.blockWithLabel { background-color:yellow; margin:2px;}
.C2 div.position { float:left}
すべてのブラウザで、(画面の幅が十分に大きい場合)同じ行に6つの要素があります
今、使って休憩したい
.C2 div.position.AccountNumber, .C2 div.position.validator { clear:left }
問題は、IE7では、AccountNumberが新しい行に表示されますが、次の要素CheckDigitとBankNameが同じ行ではなく、前の行に表示されることです。
どうすれば修正できますか?