0

CSS と残りの幅については、すでに多くの疑問が提起されています。それらを読んだ後、私はまだ修正できない問題を抱えています。input 要素に残りの幅を使い切らせようとすると、それを含む より常に 4px 広くなりますdiv。

<!DOCTYPE html>
<html>
<body>
    <div>
        <div style='float:left; margin-right:10px;'>Hello:</div>
        <div style='overflow:hidden'><input style='width:100%'/></div>
    </div>
</body>
</html>

input要素は常に 4 ピクセル幅があり、右の境界線を表示できません。margin-left入力のを設定すると表示され-4pxますが、左の境界線は表示されません。

これをChromeでテストしました。

4

1 に答える 1

4

オーバーフローを避けるためbox-sizing: border-box;にあなたに追加することができます。input基本的に行うことは、設定時にボーダーとパディングが考慮されることですwidth: 100%。異なるブラウザ用にいくつかのベンダープレフィックスを含める必要があることに注意してください。

.myinput {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid orange; /*just to make border more clear*/
    width: 100%;
}

リトル デモ:リトル リンク.

于 2012-09-13T13:08:25.173 に答える