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>（<li>或<ul>之外的<ol>元素不能松散。

然后，在CSS上提供display: inline-block;到li应该可以解决问题。

编辑：嘿，您的jsfiddle已经这样做了，它有效！

Answer 2

要获得label的宽度，您必须为li添加宽度（因为宽度由父元素决定）。这样的事情（see fiddle）：

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

将标签和输入移动到与之前相同的行

2 个答案: