スタイルラベルとチェックボックスを併用すると（Plunker添付）

Question

http://plnkr.co/edit/a5RpkuWJFMfnOgoKr7pm?p=preview

プランナーリンクを参照してください。これに従って、チェックボックスを極端な左側に置いて、値の 'Data：'を常に極端な右側にしたい。私たちが最大化したとしても、常に極端に終わっていて、その中間にはありません。

あなたも気づいた場合、チェックボックスと値 'Data：'は同じ行にありません。チェックボックスは上側に少しあり、値 'データ：'は下側だけです。どうすれば同じ行に並べることができますか？ここで

.main_div { 
 
    border: 1px solid red; 
 
    width: 30%; 
 
    margin: 50px; 
 
    padding: 2px; 
 
}

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div ng-controller="ModalDemoCtrl"> 
 
    <div class='main_div'> 
 
    <div> 
 
     <div class='rules'> 
 
     <span> 
 
      <input type="checkbox" /> 
 
      <label>Data:</label> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

：ここ

はコードである

input { 
    float: left; 
} 

.floated-label { 
    float: right; 
} 

.rules { 
overflow: hidden; 
} 

<div class='rules'> 
    <input type="checkbox" /> 
    <label class="floated-label">Data:</label> 
</div> 

Answer 2

フレックスは、ここで使用することができます。

.main_div { 
 
    border: 1px solid red; 
 
    width: 30%; 
 
    margin: 50px; 
 
    padding: 2px; 
 
} 
 
.rules span { 
 
    display:flex; 
 
    justify-content:space-between; 
 
    } 
 
/* reverse order ? label { 
 
    order:-1; 
 
    } 
 
*/ 
 
input { 
 
    margin:auto 0; 
 
    }

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div ng-controller="ModalDemoCtrl"> 
 
    <div class='main_div'> 
 
    <div> 
 
     <div class='rules'> 
 
     <span> 
 
      <input type="checkbox" /> 
 
      <label>Data:</label> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

またはフロート+テキスト揃え

.main_div { 
 
    border: 1px solid red; 
 
    width: 30%; 
 
    margin: 50px; 
 
    padding: 2px; 
 
} 
 
.rules { 
 
    text-align:right; 
 
    } 
 

 
input { 
 
float:left; 
 
    }

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div ng-controller="ModalDemoCtrl"> 
 
    <div class='main_div'> 
 
    <div> 
 
     <div class='rules'> 
 
     <span> 
 
      <input type="checkbox" /> 
 
      <label>Data:</label> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>