表单中文本字段的对齐方式答案

【问题标题】：Alignment of textfield in a form表单中文本字段的对齐方式
【发布时间】：2014-12-26 13:53:48
【问题描述】：

我想在我的表单中对齐我的文本字段，但我找不到办法。我会用一个打印屏幕让你进入一个希望文本字段开始的地方。这是我的代码...

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
</head>
<body>
<form method="post" action="signup.php">
<fieldset>
    <legend>Registration Form</legend>
    <label>First Name :
        <input type="text" name="fname" required="required" />
    </label>
    <br/>
    <br/>
    <label>Last Name :
        <input type="text" name="lname" required="required" />
    </label>
    <br />
    <br />
    <label>Username :
        <input type="text" name="username" required="required" />
    </label>
    <br />
    <br />
    <label>Email :
        <input type="text" name="email" required="required" />
    </label>
    <br />
    <br />
    <label>Password :
        <input type="text" name="password" required="required" />
    </label>
    <br/><br/>
 User Type:
  <br/>Doctor
  <input type="radio" name="answer" value="Doctor" />
  Patient
  <input type="radio" name="answer" value="Patient" />

  <!--DOCTOR OPTIONS -->
  <div id="expandDoctor" style="display:none;">
    <label id="Male">Male</label>
    <input type="radio" name="DoctorG" value="male" id="DoctorG">
    <label id="Female">Female</label>
    <input type="radio" name="DoctorG" value="female" id="DoctorG">
    <br/>
    <br/>
    <label id="Age">Age:</label>
    <input type="text" name="DoctorAge" id="DoctorAge" />
    <br/>
    <br/>
    <label id="Specialty">Specialty:</label>
    <select id="SelectSpecialty" name="specialty">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
    <br/>
    <br/>
    <label id="ID">Doctor ID:</label>
    <input type="text" name="Doctor_ID" id="Doctor_ID" />
  </div>

  <!--PATIENT OPTIONS -->
  <div id="expandPatient" style="display:none;">
    <label id="Male">Male</label>
    <input type="radio" name="PatientG" value="male" id="PatientGM">
    <label id="Female">Female</label>
    <input type="radio" name="PatientG" value="female" id="PatientGF">
    <br/>
    <br/>
    <label id="Age">Age:</label>
    <input type="text" name="PatientAge" id="PatientAge" />
    <br/>
    <br/>
    <label id="Disease">Disease:</label>
    <select id="SelectDisease" name="disease">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
    <br/>
    <br/>
    <label id="SPID">SPID:</label>
    <input type="text" name="PatientSPID" id="PatientSPID" />
  </div>
</fieldset>

<input type="submit" value="Register" name="register"/>
</form>
</body>
<script>
$("input[type='radio'][name='answer']").change(function() {
  $("[id^=expand]").hide();
  $("#expand" + $(this).val()).show();
});</script>

</body>
</html>

我希望文本字段与我放置红线的位置对齐你能帮我吗？

【问题讨论】：

标签： html css alignment

【解决方案1】：

将所有input 包装在label 中并添加width 并将输入设置为float:right

label {
  width: 280px;
  display: inline-block;
}
label input {
  float: right;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <form method="post" action="signup.php">
    <fieldset>
      <legend>Registration Form</legend>
      <label>First Name :
        <input type="text" name="fname" required="required" />
      </label>
      <br/>
      <br/>
      <label>Last Name :
        <input type="text" name="lname" required="required" />
      </label>
      <br />
      <br />
      <label>Username :
        <input type="text" name="username" required="required" />
      </label>
      <br />
      <br />
      <label>Email :
        <input type="text" name="email" required="required" />
      </label>
      <br />
      <br />
      <label>Password :
        <input type="text" name="password" required="required" />
      </label>
      <br/>
      <br/>User Type:
      <br/>Doctor
      <input type="radio" name="answer" value="Doctor" />Patient
      <input type="radio" name="answer" value="Patient" />
      <!--DOCTOR OPTIONS -->
      <div id="expandDoctor" style="display:none;">
        <label id="Male">Male</label>
        <input type="radio" name="DoctorG" value="male" id="DoctorG">
        <label id="Female">Female</label>
        <input type="radio" name="DoctorG" value="female" id="DoctorG">
        <br/>
        <br/>
        <label id="Age">Age:</label>
        <input type="text" name="DoctorAge" id="DoctorAge" />
        <br/>
        <br/>
        <label id="Specialty">Specialty:</label>
        <select id="SelectSpecialty" name="specialty">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
        </select>
        <br/>
        <br/>
        <label id="ID">Doctor ID:</label>
        <input type="text" name="Doctor_ID" id="Doctor_ID" />
      </div>
      <!--PATIENT OPTIONS -->
      <div id="expandPatient" style="display:none;">
        <label id="Male">Male</label>
        <input type="radio" name="PatientG" value="male" id="PatientGM">
        <label id="Female">Female</label>
        <input type="radio" name="PatientG" value="female" id="PatientGF">
        <br/>
        <br/>
        <label id="Age">Age:</label>
        <input type="text" name="PatientAge" id="PatientAge" />
        <br/>
        <br/>
        <label id="Disease">Disease:</label>
        <select id="SelectDisease" name="disease">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
        </select>
        <br/>
        <br/>
        <label id="SPID">SPID:</label>
        <input type="text" name="PatientSPID" id="PatientSPID" />
      </div>
    </fieldset>
    <input type="submit" value="Register" name="register" />
  </form>
</body>
<script>
  $("input[type='radio'][name='answer']").change(function() {
    $("[id^=expand]").hide();
    $("#expand" + $(this).val()).show();
  });
</script>
</body>

</html>

【讨论】：

我们可以在选择用户类型后修复对齐不那么长吗？谢谢
你能做到吗？因为我尝试了一些东西但没有工作
"[可以]我们在选择用户类型后修复对齐不那么长吗？" - 什么？

【解决方案2】：

使用宽度变量。或者将表格放在表格中。

【讨论】：

【解决方案3】：

下面是对齐前 5 个文本字段的第二个解决方案

<label style="width: 350px; display: inline-block;">First Name :
<input type="text" style="float: right;" name="fname" required="required" />
</label>

对于我们要对齐的每个文本字段

【讨论】：

【解决方案4】：

使其对齐正确使用表并在 td 中获取标签和文本字段的最佳方法。

【讨论】：

【解决方案5】：

尝试使用表格格式。您还可以使用其中一种有用的框架，例如引导程序和基础。

【讨论】：

我也会试试你的解决方案。谢谢