html - 使用 CSS 布局表单，使表单居中但左对齐可变宽度字段和右对齐按钮

Question

我正在尝试使用 CSS 格式化表单。这是我的示例 HTML:

<div id='login'>
  <h3>Log In</h3>
  <form action='/' method='post' accept-charset='UTF-8'>
    <div class='centerform'>
      <label for='userId'>User Id:</label>
      <input id='userId' maxlength='30' />
      <label for='password'>Password:</label>
      <input id='password' type='password' maxlength='30' />
      <label for='longer'>Longer Field:</label>
      <input id='longer' maxlength='50' width='50' />
      <label for='checkbox'>I have a bike:</label>
      <input id='checkbox' type='checkbox' name='vehicle' value='Bike'>
      <input type='submit' class='button' value='Submit' />
    </div>
  </form>
</div>

我希望表单看起来像这样:

请注意，输入字段彼此左对齐，标签彼此右对齐，提交按钮与整个表单右对齐，并且整个内容需要在页面中水平居中。同样的 CSS 需要适用于具有可变宽度字段的许多不同表单。

我当前的 CSS 如下所示:

.centerform  label{
   float: left;
   width: 50%;
   text-align: right;
   /*background-color: green;*/
 }
 .centerform  input{
   font-size: 100%;
   float: right;
   width: 50%;
 }

唯一正确的是标签的对齐方式。我也不确定如何指示字段的长度。我在 html 中设置的任何宽度都会被 CSS 覆盖。

我不想使用任何硬编码像素或百分比大小，除非必要时使用可变长度字段。

编辑:我想出了如何通过使用 size 属性来拥有可变长度字段。

Answer 1

此布局可能对您有所帮助。我已经按照要求给出了百分比尺寸。

.centerform label {
  text-align: right;
  display: inline-block;
  width: 16%;
}

.centerform input {
  display: inline-block;
  width: 82%;
}

.button {
    width: 20% !important;
    float: right;
}

<div id='login'>
  <h3>Log In</h3>
  <form action='/' method='post' accept-charset='UTF-8'>
    <div class='centerform'>
      <label for='userId'>User Id:</label>
      <input id='userId' maxlength='30' />
      <label for='password'>Password:</label>
      <input id='password' type='password' maxlength='30' />
      <label for='longer'>Longer Field:</label>
      <input id='longer' maxlength='50' width='50' />
      <label for='checkbox'>I have a bike:</label>
      <input id='checkbox' type='checkbox' name='vehicle' value='Bike'>
      <input type='submit' class='button' value='Submit' />
    </div>
  </form>
</div>