0

選択フィールドのすぐ隣に日付フィールドを揃えようとしています。これを行う方法は？(例: 1 行に 2 つのフォーム フィールド)

<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 に次のように使用されるようになりました。

.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 に答える