4

私は単純なWebフォームを作成していますが、入力フィールドの1つは、想定どおりに左側にドレスアップせず、前のフォームフィールドの右側に配置されています。フォームを非常に単純なテキストケースに縮小しました。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Test</title>
  <style>
    #new-thing {
      width: 450px;
    }
    #new-thing label {
      clear: left;
      float: left;
      width: 120px;
      font-weight: bold;
    }
    #new-thing input {
      width: 250px;
      margin-bottom: .5em;
    }
  </style>
</head>
<body>
<div id='new-thing'>
  <form>
    <label for='name'>Thing Name:</label>
    <input id='name'>
    <label for='first-thing'>First:</label>
    <input id='first-thing' style='width:6em;'>
    <label for='second-thing'>Second:</label>
    <input id='second-thing' style='width:6em;'>
  </form>
</div>
</body>
</html>

2番目のフィールドは、最初のフィールドの下にあり、ラベル「Second：」に隣接しているはずですが、代わりに最初のフィールドの右側にあります。この画面スナップを参照してください。

ここに画像の説明を入力してください

私は何を逃しましたか？

4

2 に答える 2

5

入力を左にフロートしなかったためです。

次のように変更#new-thing inputします。

#new-thing input {
    float: left;
    width: 250px;
    margin-bottom: .5em;
    }

こちらをご覧ください

于 2012-09-07T06:03:32.243 に答える
-1

これを試してください：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Test</title>
  <style>
    #new-thing {
      width: 450px;
    }
    #new-thing label {
      clear: left;
      float: left;
      width: 120px;
      font-weight: bold;
    }
    #new-thing input {
      width: 250px;
      margin-bottom: .5em;
    }
  </style>
</head>
<body>
<div id='new-thing'>
  <form>
      <table>
        <tr>
            <td><label for='name'>Thing Name:</label></td>
            <td><input id='name' /></td>
        </tr>

        <tr>
            <td><label for='first-thing'>First:</label></td>
            <td><input id='first-thing' style='width:6em;' /></td>
        </tr>

        <tr>
            <td><label for='second-thing'>Second:</label></td>
            <td><input id='second-thing' style='width:6em;' /></td>
        </tr>

        </table>
  </form>
</div>
</body>
</html>
于 2012-09-07T06:10:36.080 に答える