Question

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

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

我希望文本字段在我放红线的位置对齐你能帮我吗？ I want the textfield to start in the place where i put the red line

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

Answer 2

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

Answer 3

第二个解决方案，以便将第一个5个文本字段排在下面

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

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

Answer 4

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

Answer 5

尝试使用表格格式。您还可以使用一个有用的框架，如bootstrap和foundation。

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

5 个答案: