如何在自舉中的複選框右側添加標籤

我一直在嘗試很多方法來將標籤的前面放置一個<input type="checkbox" id="123"/> ，但它們之間留下了巨大的差距。任何解決方法？這裏是我的html：如何在自舉中的複選框右側添加標籤

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="input-group input-group-sm"> 
      <input type="checkbox" id="ProcessingConsultantYN" value="0" /> 
      <label class="input-group-addon input-group-addon-pireus" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label> 
     </div> 
    </div> 
</div>

這裏是正在顯示的網站上，哪些其實我是想解決時，它的外觀：

來源

2017-07-26 Alexander Hristov

根據所使用的類，您正在使用Bootstrap？ – Swellar

當您通過引導示例和文檔時，您可以更好地查找該解決方案。 [Bootstrap表單元素]（http://getbootstrap.com/css/#forms） –

是的，twitter引導。我也無法在html檢查器中發現任何錯誤。 –

試試下面的代碼只是checkbox-inline取代你label標籤種類。

<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div class="input-group input-group-sm"> 
 
     <input type="checkbox" id="ProcessingConsultantYN" value="0" /> 
 
     <label class="checkbox-inline" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-07-26 06:09:38

爲什麼你編輯我的答案有那麼錯呢？ @Swellar –

這沒有奏效。 –

你現在面臨的是什麼，它完美的作品。 –

嘗試使用此代碼。根據標籤，標籤使用您的複選框標籤，根據BOOTSTRAP official文檔，或者您可以修改任何你想要的結構。

我只是單純地試圖使與形式控制一個選項，你可以使用.form-control-static類按Static control

<!-- Latest compiled and minified CSS --> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 
     <div class="checkbox"> 
 
      <label> <input type="checkbox"> Обработва се от Кредитен Консултант </label> 
 
     </div> 
 
     
 
     <div class="input-group"> 
 
      <span class="input-group-addon" id="basic-addon1"><input type="checkbox" id="ProcessingConsultantYN" value="0" /></span> 
 
      <label class="form-control">Обработва се от Кредитен Консултант</label> 
 
     </div> 
 
     
 
     </div> 
 
    </div>

來源

2017-07-26 06:04:46

類pull-left應該能滿足你。

<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div class="input-group input-group-sm"> 
 
     <input type="checkbox" id="ProcessingConsultantYN" value="0" /> 
 
     <label class="pull-left" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-07-26 06:13:54 ScanQR

向左拉它使其覆蓋實際複選框。 –

你是否試過使用Bootstrap？ – Swellar

How to align checkboxes and their labels consistently cross-browsers

label { 
    display: block; 
    padding-left: 15px; 
    text-indent: -15px; 
} 
input { 
    width: 13px; 
    height: 13px; 
    padding: 0; 
    margin:0; 
    vertical-align: bottom; 
    position: relative; 
    top: -1px; 
    *overflow: hidden; 
}

AS @dfsq說檢查，如果東西在HTML檢查是不是錯了。檢查上面的鏈接，如果它的作品或不。這個鏈接應該肯定會幫助你。檢查jsfiddle

來源

2017-07-26 06:47:58 opalfire

如何在自舉中的複選框右側添加標籤

回答

相關問題