CSS：調整包裝上內聯項目的對齊方式

我有兩個項目表示顯示爲內聯塊的複選框。在寬屏幕上，它們應該彼此相鄰顯示。兩者都應該居中。CSS：調整包裝上內聯項目的對齊方式

Good: 

|-----itemX--itemXYZ-----|

在較小的屏幕，我希望他們將被顯示在彼此的頂部，仍然集中在屏幕上，但左對齊：

Good: 

|--itemX----| 
|--itemXYZ--|

我能夠得到的時刻是什麼只是：

Bad: 

|---itemX---| 
|--itemXYZ--|

我怎麼能用CSS（3）實現這個？

PS：我使用的是自舉3，也許這可能是有幫助...

HTML：

<div id="form"> 
    <div class="cb"></div> 
    <div class="cb"></div> 
</div>

CSS至今：

#form { 
    display: block; 
    text-align: center; 

    @media all and (max-width: 480px) { 
     // 
    } 
} 

.cb { 
    display: inline-block; 
}

來源

2015-09-30 Fidel90

分享您的代碼 –

您應該使用媒體查詢來做到這一點。 – rblarsen

@ArunKumarM：到目前爲止沒有多少分享，無論如何我編輯了我的問題:) – Fidel90

您可以使用media queries爲那個任務。

 .checkbox{ 
 
      display: inline-block; 
 
     } 
 
     @media all and (max-width: 480px) { 
 
      .checkbox{ 
 
       display: block; 
 
      } 
 
     }

<div class="container text-center"> 
 
     <div class="checkbox text-center"> 
 
      <label> 
 
       <input type="checkbox"> Checkbox 1 
 
      </label> 
 
     </div> 
 
     <div class="checkbox text-center"> 
 
      <label> 
 
       <input type="checkbox"> Checkbox 2 
 
      </label> 
 
     </div> 
 
    </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

來源

2015-09-30 12:39:17 4ra

而不是tex-align:center試試下面

#form { 
 
    display: block;  
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<div id="form"> 
 
    <div class="cb">itemX</div> 
 
    <div class="cb">itemXYZ</div> 
 
</div>

希望這有助於

來源

2015-09-30 12:41:15

ŧ他的作品：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Sample</title> 
<style> 
    *{box-sizing:border-box;} 
    #form{ 
     text-align:center; 
    } 
    .cb{ 
     width:50%; 
     text-align:left; 
     display:inline-block; 
    } 

    .cb:first-child{text-align:right;} 


    @media (max-width:320px){ 
     .cb:first-child{text-align:left;} 
     .cb{width:100%;} 
    } 
</style> 
</head> 
<body> 
<div id="form"> 
    <div class="cb"><label class="cb-inner"><input type="checkbox">short label</label></div> 
    <div class="cb"><label class="cb-inner"><input type="checkbox">longer label label</label></div> 
</div> 
</body> 
</html>

來源

2015-09-30 14:10:42 bknights

CSS：調整包裝上內聯項目的對齊方式

回答

相關問題