Question

我试图将我的选择表单字段全部放在同一行。以下是我的代码。我尝试在选择标签和标签上添加display:inline;，但它似乎没有改变任何东西。

HTML：

   <form id ="myform1">
   <label for='orgUnit'>Organization Unit</label>
   <select name="orgUnit" id="orgUnit">
        <option value="Select">Please Select an option</option>
        </select>
    <label for ='org'>Organization</label>
    <select name="org" id="org">
        <option value="Select">Please Select an option</option>
        </select>
    <label for ="bu">Business Unit</label>
    <select name="bu" id="bu">
        <option value="Select">Please Select an option</option>
        </select>
<label for ="department">Department</label>
<select name="department" id="department">
        <option value="Select">Please Select an option</option>
        </select>
    <input type="hidden" name="buID" id="buID" >
</form>

CSS：

select {

width: 175px;
}

label {
width:130px;
text-align:right;
padding-right:10px;
}

所以我添加了for属性并删除了br标签，但现在它看起来像这样。

抱歉，找到了答案，我还有一些CSS导致标签浮动，看起来像是在图像中。

Answer 1

取出<br>标签。那些正在引起你的新线。

＆＃13;

select {
  float:right;
  width: 175px;
}

label {
  float:left;
  width:130px;
  text-align:right;
  padding-right:10px;
}

＆＃13;

<form id ="myform">
   <label>Organization Unit</label>
   <select name="orguniy" id="orgUnit">
    <option value="Select">Please Select an option</option>
    </select>
<label>Organization</label>
<select name="org" id="org">
    <option value="Select">Please Select an option</option>
    </select>
<label>Business Unit</label>
<select name="bu" id="bu">
    <option value="Select">Please Select an option</option>
    </select>
<label>Department</label>
<select name="department" id="department">
    <option value="Select">Please Select an option</option>
    </select>
<input type="hidden" name="buID" id="buID" >
</form>

＆＃13;

Answer 2

删除<br>代码会有很大帮助。

 <form id ="myform">
 <label>Organization Unit</label>
 <select name="orguniy" id="orgUnit">
    <option value="Select">Please Select an option</option>
    </select>
<label>Organization</label>
<select name="org" id="org">
    <option value="Select">Please Select an option</option>
    </select>
<label>Business Unit</label>
<select name="bu" id="bu">
    <option value="Select">Please Select an option</option>
    </select>
<label>Department</label>
<select name="department" id="department">
    <option value="Select">Please Select an option</option>
    </select>
<input type="hidden" name="buID" id="buID" >
</form>

Answer 3

<强> JSFiddle

HTML

<form id="myform">
  <label>Organization Unit
    <select name="orguniy" id="orgUnit">
      <option value="Select">Please Select an option</option>
    </select>
  </label>
  <label>Organization
    <select name="org" id="org">
      <option value="Select">Please Select an option</option>
    </select>
  </label>
  <label>Business Unit
    <select name="bu" id="bu">
      <option value="Select">Please Select an option</option>
    </select>
  </label>
  <label>Department
    <select name="department" id="department">
      <option value="Select">Please Select an option</option>
    </select>
  </label>
  <input type="hidden" name="buID" id="buID">
</form>

那么为什么这与你现在的不同呢？这是由于您对<label>标记的使用不当造成的。请参阅 this Stack Overflow问题，以便更好地了解标签元素的正确使用方式。

简而言之：它必须使用 for attribute ，或者它必须包围它引用的元素，在您的情况下是<select>标记。

我也冒昧地删除了您的<br/>代码，您可以使用标签上的CSS margin-top或margin-bottom属性添加间距。

CSS

label > select {
  width: 175px;
}

label {
  display: block;
}
label:nth-child(1) > select{
  margin-left: 40px;
}
label:nth-child(2) > select{
  margin-left: 72px;
}
label:nth-child(3) > select{
  margin-left: 67px;
}
label:nth-child(4) > select{
  margin-left: 80px;
}

CSS更改非常简单，我在每个margin-left代码中添加了自定义<select>，以使其正确对齐。

为什么这与其他答案如此不同？ 因为我解释了以下声明：

“我正在尝试将我的选择表单字段全部放在同一行”

建议您需要垂直对齐。否则，如果您需要将它们放在一行中，任何其他答案都可以轻松完成。

Answer 4

将您的标签和输入包含在<div>中，并将div作为inline-block。

这是一些灵感：

Bootstrap inline form

在同一行

4 个答案: