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

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

Answer 2

添加此css

.slct{
   float:left
 }    
.input-append{
   float:left
 }

修改后的HTML

<div class="control-group">
<label class="control-label span4">Released by</label>
<div class="controls">
    <select class="span4 slct">
        <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>

Answer 3

HI现在习惯这个css就像这样

.control-group{
background:red;
  width:400px;
}


.control-label.span4{
float:left;
}
.input-append.date.controls{
float:right;
}

的 Demo 的

对齐一个流体行上的2个字段

3 个答案: