tarzı etiket ve onay kutulu

Question

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

plunker bağlantıya başvurabilirsiniz (Plunker ekli). Buna göre, onay kutumun aşırı sol tarafta olmasını ve her zaman aşırı sağ tarafta olacak şekilde 'Veri:' değerini istiyorum. Yani, en üst düzeye çıkarsak bile, her zaman aşırı uçlarda olmalı ve arada bir yerde olmamalıdır.

Ayrıca fark ettiyseniz, onay kutusu ve 'Veri:' değeri aynı satırda değil. Onay kutusu üst kısımda birazdır ve 'Veri:' değeri sadece alt kısımdır. Onları aynı çizgide nasıl hizalarım? İşte

.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

esnek burada kullanılabilir Burada

kodudur.

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

veya +

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