float要素内の要素にborder属性が含まれるとページが変形します ask_html/css_WEB-ITnose をご利用ください。-htmlチュートリアル-php.cn

float要素内の要素にborder属性が含まれるとページが変形します ask_html/css_WEB-ITnose をご利用ください。

WBOY

リリース： 2016-06-21 09:30:23

オリジナル

1022 人が閲覧しました

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> 	<style>	.input200{width:190px;}	.orgClumn{float:left;display:block;min-width:250px;}	.orgClumn .orgClumnName{display:block;width:75px;float:left;}	</style> </head> <body><span style="width: 546px; height: 100px; padding: 10px 20px;border:1px solid;display:block;"> <span class="orgClumn"><span class="orgClumnName">a</span><input class="input200" type="text"></span> <span class="orgClumn"><span class="orgClumnName">b</span><input class="input200" style="border:1px solid;" type="text"></span> <span class="orgClumn"><span class="orgClumnName">c</span><input class="input200" type="text"></span> <span class="orgClumn"><span class="orgClumnName">d</span><input class="input200" type="text"></span> <span class="orgClumn"><span class="orgClumnName">e</span><input class="input200" type="text"></span> <span class="orgClumn"><span class="orgClumnName">f</span><input class="input200" type="text"></span> </span> </body></html>

ログイン後にコピー

c 要素は右側に表示されますが、なぜ左側に表示されないのですか? b 要素の後ろにある border 属性を削除すると、すべてが正常になります。
style="border:1px Solid;" これが原因です

ディスカッション (解決策) への返信

ブラウザーの入力要素のデフォルトの境界線の幅は、入力ボックスの 1 つに設定した幅と異なります. ここでテストブラウジングブラウザのデフォルトは 2px なので:

スパン c が左に移動すると、スパン a の後に入力ボックスにヒットし、最終位置はスパン b の下で停止します

1. デフォルトのブラウザ入力スタイルは 2px inset です。
2. b に入力 style="border:1px Solid;" を手動で設定すると、ブロック b の高さが小さくなります。
3. float:left 要素の場合、常に最初にランク付けされようとします。要素の右側の幅が十分でない場合、要素は次の行の左端に移動されます。

つまり、あなたの場合、c が b より下にランク付けされても不思議ではありません。
押して期待どおりに配置したい場合、解決策も非常に簡単です: 1. b の入力の境界線を 2 に設定します。つまり、style="border:2px Solid;" または2、orgClumn Height のボルデックスを設定できます。
.orgClumn{float:left;display:block;min-width:250px;height:30px;}