Question

enter image description here As in, in this image, the labels are slightly above to the input text fields. I want them to justify.

input {
  border: 1px solid black;
  border-top: 3px solid grey;
  border-left: 3px solid grey;
  margin: 5px 4px;
  float: left;
}

label {
  width: 200px;
  float: left;
  text-align: right;
}

<body style="margin:50px;" align="middle">
  <b>Registration Form</b>
  <form>
    <label for="uname">Username</label>
    <input type="text" id="uname" name="uname"><br>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd"><br>
    <label for="cpwd">Confirm Password</label>
    <input type="password" id="cpwd" name="cpwd">
  </form>
</body>

Answer 1

label {
  display: inline-block;
  width: 150px;
  /* Set a width that accommodates your longest label */
  text-align: right;
  margin: 5px 10px 5px 0;
  /* Adjust the right margin to space out the label from the input */
}

input {
  border: 1px solid black;
  border-top: 3px solid grey;
  border-left: 3px solid grey;
  margin: 5px 0;
  /* Adjust the top and bottom margin as needed */
  display: inline-block;
  width: 200px;
  /* Set a width that works for your layout */
}

<div>
  <label for="uname">Username</label>
  <input type="text" id="uname" name="uname">
</div>

<div>
  <label for="pwd">Password</label>
  <input type="password" id="pwd" name="pwd">
</div>

<div>
  <label for="cpwd">Confirm Password</label>
  <input type="password" id="cpwd" name="cpwd">
</div>

删除<条码>float:左边;,在使用<条码>时不需要的两条内容中。始终如一地在<条码>上填上<>。帮助确保每个奶牛都被当作一环,是一种良好做法

Answer 2

Just wrap every label & input in a separate span tag or div tag and then in css give this span tag display:flex and align-items:center; to vertically center them

span{
  display:flex;
  align-items:center;
}
input { 
  border: 1px solid black; 
  border-top: 3px solid grey;
  border-left: 3px solid grey;
  margin: 5px 4px;
  float:left;
}
label { 
  width: 200px;
  float: left;
  text-align: right;
}

<b>Registration Form</b>
<span>
   <label for="uname">Username</label>
   <input type="text" id="uname" name="uname">
</span>
<br>
<span>
   <label for="pwd">Password</label>
   <input type="password" id="pwd" name="pwd">
</span>
<br>
<span>
   <label for="cpwd">Confirm Password</label>
   <input type="password" id="cpwd" name="cpwd">
</span>

Answer 3

你们应当使用在线锁定物,例如:

div.register input { 
  border: 1px solid black; 
  border-top: 3px solid grey; 
  border-left: 3px solid grey; 
  margin: 0px 4px; /* top margin removed */
  display: inline-block; 
} 

div.register label { 
  width: 200px;
  text-align: right; 
}

<div class="register">
 <label for="uname">Username</label>

 <input type="text" id="uname" name="uname"><br>

 <label for="pwd">Password</label>

 <input type="password" id="pwd" name="pwd"><br>

 <label for="cpwd">Confirm Password</label>

 <input type="password" id="cpwd" name="cpwd">
</div>

友情链接