css - 在一个流体行上对齐 2 个字段

Question

我尝试将日期字段与选择字段对齐。如何完成这项工作？ (例如，一行中有两个表单域)

<div class="control-group">
    <label class="control-label span4">Released by</label>
    <div class="controls">
        <select class="span4">
            <option value="0" selected="selected">John Doe</option>
            <option value="1">Another name</option>
            <option value="2">And another one</option>
         </select>
         <div class="input-append date controls" id="dp1" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
             <input class="span2" size="16" type="text" value="12-02-2012" readonly="">
             <span class="add-on"><i class="icon-th"></i></span>
         </div>
     </div>
 </div>        

Answer 1

这是我的方法:http://jsfiddle.net/Cakj6/

<div class="control-group">
  <label class="control-label span4">Released by</label>
  <div class="controls">
    <select class="span4">
      <option value="0" selected="selected">John Doe</option>
      <option value="1">Another name</option>
      <option value="2">And another one</option>
    </select>
    <div class="input-append date controls" id="dp1" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
      <input class="span2" size="16" type="text" value="12-02-2012" readonly="">
      <span class="add-on"><i class="icon-th"></i></span>
    </div>
  </div>
</div>

.control-group {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
.control-label, .controls, .controls select, .controls .date {
  float: left;
  line-height: 20px;
  vertical-align: middle
}
.controls select {
  margin: 0;
  padding: 0;
}
.controls, .controls date {
  padding-left: 5px;
}

如果它回答了您的问题，请告诉我们。