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

这种布局可能对您有所帮助。我按要求给出了百分比尺寸。

＆＃13;

.centerform label {
  text-align: right;
  display: inline-block;
  width: 16%;
}

.centerform input {
  display: inline-block;
  width: 82%;
}

.button {
    width: 20% !important;
    float: right;
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

.centerform ul{margin:0;padding:0}
.centerform ul li{list-style:none;padding:5px 0;}
.centerform label{width:18%;display:inline-block;text-align:right;}
.centerform input{display:inline-block;width:80%;text-align:left;}
.centerform input[type='checkbox']{display:inline;width:auto;}
.centerform input[type='submit'] {display:inline;width:auto;float:right;}

＆＃13;

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

＆＃13;

希望这是您所期望的，您只需调整.centerform label和.centerform input WIDTH即可调整并适合表单的整体宽度。

使用CSS的布局表单，以便窗体居中但左对齐的可变宽度字段和右对齐按钮

2 个答案: