css - 将标签和输入移动到与前一个相同的行

Question

如何让第二个标签和输入与第一个标签在同一行，同时保留第一个标签的宽度和顶部填充？

下面或这里的代码是 jsfiddle 版本http://jsfiddle.net/kpBNB/2

<div>
  <li id="input1">
    <label>From</label>
    <select>
      <option value="1">1 am</option>
    </select>
  </li>

  <li id="input2">
    <label> until</label>
    <select>
      <option value="1">1 am</option>
    </select>
  </li>
</div>

---

div {
  width: 100%;
   background-color: #ccc;
}

li {
  padding-top: 6px;
}

label {
  width: 15%;
  float: left;
  display: block;
  text-align: right;
}

Answer 1

首先，你<div>应该是一个<ul>（你不能在or<li>之外有松散的元素）。<ul><ol>

然后，给予display: inline-block;你li的 CSS 应该可以解决问题。

编辑：嘿，你的 jsfiddle 已经做到了，而且它有效！

Answer 2

要获得宽度，label您必须向其中添加宽​​度li（因为宽度由父元素确定）。所以像这样（见小提琴）：

ul {
  width: 100%;
  background-color: #ccc;
}

li {
  width: 30%;   /*this needs width*/
  padding-top: 6px;
  display: inline-block;
}

label {
  width: 50%; /* since my li was 30% width of ul, 
                 50% of that is back to your original 15% width */
  float: left;
  display: block;
  text-align: right;
}