0

我正在尝试在选择字段旁边对齐日期字段。如何完成这项工作？（例如，一行中的两个表单域）

<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>
4

3 回答 3

2

这是我的方法：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;
}

让我们知道它是否回答了您的问题。

于 2012-09-11T09:14:30.887 回答
0

HI 现在已经习惯了这个 css 就像 thids

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


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

演示

于 2012-09-11T09:17:41.153 回答
0

添加这个CSS

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

​</p>

修改后的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>

​</p>

于 2012-09-11T08:59:23.950 回答