如何使複選框水平？

我正在嘗試水平復選框。我在iPad上製作應用程序，所以我有足夠的空間顯示水平復選框，如圖所示。我能夠顯示覆選框或方形複選框。但他們展現在垂直列表中，但我需要的水平列表上，這裏是我如何使複選框水平？

http://play.ionic.io/app/1c4c988a3858 我面臨兩個問題

複選框列表是垂直的。但我需要那些水平的列表
如何背景綠色。

我從這個http://ionicframework.com/docs/components/#checkbox 閱讀文檔這裏是我的代碼 http://play.ionic.io/app/1c4c988a3858

我想在像這種類型的複選框作爲節目的

！[在這裏輸入的形象描述] [1]

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
</head> 

<body ng-app="app"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
      <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="padding"> 
      <ul class=""> 

       <li class=""> 
        <ion-checkbox class="checkbox-square checkboxList"> 
         Account 
        </ion-checkbox> 
       </li> 
       <li class="checkbox-square checkboxList"> 
        <ion-checkbox> 
         open transaction 
        </ion-checkbox> 
       </li> 
       <li class="checkbox-square checkboxList"> 
        <ion-checkbox> 
         closed transaction 
        </ion-checkbox> 
       </li> 

       <li class="checkbox-square checkboxList"> 
        <ion-checkbox> 
         dispute 
        </ion-checkbox> 
       </li> 

      </ul> 
     </ion-content> 
    </ion-pane> 
</body> 

</html>

來源

2015-07-12 user944513

您的複選框在'li'標籤中，默認情況下是塊元素。要顯示它們的內聯，使'li'的'display：inline-block;'' – yts

好吧我會嘗試更新你的 – user944513

它的工作請檢查預覽button.but如何設置背景顏色http：// play。 ionic.io/app/b3aef6f66f08 .green複選框的背景 – user944513

添加以下css使選定的複選框變爲綠色：

.checkbox input:checked + .checkbox-icon:before, 
.checkbox input:checked:before { 
    background: #51AE46; 
    border-color: #51AE46; 
}

來源

2015-07-12 23:07:50 3dgoo

如何使複選框水平？

回答

相關問題