logo标签列表

为什么我的CSS样式输入框不能与其标签并排显示？

cssformsalignment
4

我正在构建一个简单的网页表单，其中一个输入框无法像预期的那样向左对齐，而是坐落在前一个表单字段的右侧。我已将我的表单简化为非常简单的文本情况。

<!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个回答
5
因为你没有将输入框向左浮动。
请将#new-thing input更改为：
#new-thing input {
    float: left;
    width: 250px;
    margin-bottom: .5em;
    }

See here

好的，你抢先发了。我也是想说同样的事情。 - Wex
拍了拍头！谢谢Erics，太棒了。 - Dave Sag
-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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接