Question

How can I get the second label and input to be on the same line as the first, while preserving the first label’s width, and the top padding?

Code below or here’s the jsfiddle version 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

To get the width on the label you have to add a width to the li (as width is determined by the parent element). So something like this (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;
}