Question

我看过这里，但没有一个答案对我有用。

我在一行中有两个表单字段，我想将表单标签设置为也在一行上，并且还与正确的表单字段内联。

我使用的两种方法要么使内联表单字段和标签，但其中一个标签不是内联的，无论我尝试使用边距还是填充，它都不会超过某个px / ％。（方法1）

另一个使标签内联，但是其中一个标签无法移动超过某个px /％并且它混乱了表单字段alignmnet。（方法2）

方法1

label{
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: bold;
  margin-left: 11px
}

label.right_lab{
  display:inline-block;
}

label#lname{
  float: right;    
  margin-left:  60% !important;
}

<label for="fname" class="right_lab">First name</label>
<label for="lname" class="right_lab">Last name</label><br>
<input type="text" id='fname' name="fname" value="" placeholder="e.g Joe">
<input type="text" id='lname' name="lname" value="" placeholder="e.g.Bloggs"><br>

方法2

label{
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: bold;
  margin-left: 11px
}

label.right_lab{
  display:inline-block;
}

label#lname{
  float: right;    
  margin-left:  60% !important;
}

<label for="fname" class="right_lab">First name</label>  
<input type="text" id='fname' name="fname" value="" placeholder="e.g Joe">
<label for="lname" class="right_lab">Last name</label><br>
<input type="text" id='lname' name="lname" value="" placeholder="e.g.Bloggs"><br>

Answer 1

方法三：

＆＃13;

label {
  display: inline-block;
}
label>input {
  display: block;
}

＆＃13;

<label>
  First name
  <input type="text" />
</label>
<label>
  Last name
  <input type="text" />
</label>

＆＃13;

HTML / CSS：样式表单标签显示在同一行上并与表单字段内联

1 个答案: