web-dev-qa-db-ja.com

html <input>要素はCSSの左+右のプロパティを無視しますか？

HTMLの<input>要素が「left」プロパティと「right」プロパティのCSSペアを無視していることに気づきました。 「上」と「下」のペアについても同じです。以下のサンプルコードを参照してください。

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

<input>は、ブラウザのほぼすべてのスペースを占める必要があります（周囲の10pxの境界線を除く）。 Safariでは正常に動作しますが、FireFoxとIE <input>はブラウザの左上隅に小さいままです。

「左」と「幅」、「上」と「高さ」を使用すると、すべて正常に機能します。幅と高さがわからないので、ブラウザウィンドウの大きさに合わせて調整してほしいです。

これを回避する方法はありますか？

ありがとう。

htmlcssinputpositioning
23
Gabriel

ラッパーDIVを使用できます

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>
17
Luis Melgratti

左または上を無視しているわけではなく、10pxの位置にあることがわかります。何が起こっているのかというと、右と下が尊重されていないということです。フォーム要素はレイアウトエンジンで少し特別に扱われます。FF/ IEが入力の幅/最大長をより重要と見なす可能性は完全にあります。なぜそうなるのかについてはあまり調べていません。

しかし、それは少し奇妙なことです。おそらく、大きなテキスト入力を提供するように設計された<textarea>を確認することをお勧めします。これは、width: 100%; height: 100%;を適用して100％のサイズにプッシュし、10pxのマージンを処理できます。コンテナ部門.

WFM：

<html>
<head>
    <style>
    body
    {
        margin: 0px;
    }
    div
    {
        position: absolute; margin: 2%; width: 96%; height: 96%;
    }
    textarea
    {
        position: absolute; width: 100%; height: 100%; 
    }
    </style>
</head>
<body>
    <div>
        <textarea></textarea>
    </div>
</body>
5
annakata

http://reference.sitepoint.com/css/bottom たとえば、Internet Explorer（<= 6）について

上、右、下、左を一緒に使用して、絶対位置の要素の位置と寸法の両方の指定をサポートしないでください。指定された最後の垂直位置と水平位置を使用し、幅と高さを使用して寸法を指定する必要があります

1
Eineki

Safariでの表示方法は、表示方法ではありません。高さの値を指定しなかったため、inputはデフォルトで最後に継承されたフォントサイズのサイズになります。

上マージンと左マージンを同時に設定しようとしているため、右と下の位置も無視されます。この場合、優先されるようです。

inputフィールドを使用して、表示されたときにブラウザウィンドウの幅と高さ全体に表示する必要がある場合は、次のようにCSSをやり直す必要があります。

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

これにより、inputフィールドがユーザーのブラウザウィンドウと同じ高さと幅に拡大されます。また、ブラウザウィンドウから10ピクセルの両側にマージンがあります。

マージンが必要な場合は、それをbodyスタイルまたは入力フィールドのラッパーDIVに設定します。

0
random