1

次のコードは、すべてのブラウザでラベルの下の行に入力フィールドをレンダリングしているようです。

<html>
<head>
    <style type="text/css">
    label { display:inline-block; width:75px }
    </style>
</head>
<body>
    <form>
        <label>First Name <input type="text" name="first_name" size="30" maxlength="30"/></label>
    </form>
</body>
</html>

表示は次のとおりです。

名
[入力フィールド]

私の理解では、inline-blockは、入力要素をインラインにすることを許可しながら、ラベルの固定幅を許可する必要があります。これは私がそれが現れると思った方法です：

名[入力フィールド]

この場合、ラベルに固定幅を追加しても、両方の要素がインラインで表示されないのはなぜですか？

4

3 に答える 3

3

あなたのバージョンは意味的に正しいですが、あなたはあなたの望ましい振る舞いを得るためにこのようにそれをしなければなりません：

HTML

<form>
  <label for="first_name">First Name</label><input type="text" name="first_name" id="first_name" size="30" maxlength="30"/>
</form>

CSS

label {
  display:inline-block;
  width:75px;
  cursor: pointer;
 }

フィドル

このようにして、labelとはinput互いに分離され、自由に流れることができます。labelが保持されている場合、inputそうではありません。に設定した場合labelでもdisplay: inline-block。

于 2013-02-04T12:10:37.177 に答える
2

ラベルが入力をラップします。75pxは、テキストとワードラップなしの入力の両方に十分な幅ではない可能性があります

于 2013-02-04T12:13:30.453 に答える
-1

これは私のために働いた：ちょうどそれをdisplay：inlineにする

 <style type="text/css">
    label { display:inline; width:75px }
    </style>
于 2013-02-04T12:12:07.833 に答える