Question

我有两个项目代表显示为内联块的复选框。在宽屏幕上，它们应该彼此相邻地显示在一行中。两者都应该居中。

Good: 

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

在较小的屏幕上，我希望它们显示在彼此之上，仍然在屏幕上居中但是与左边对齐：

Good:

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

目前我能得到的只是：

Bad:

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

我怎样才能用CSS（3）来实现这个目标？

PS：我使用的是BootStrap 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;
}

Answer 1

您可以使用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>

Answer 2

而不是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>

希望这有帮助

Answer 3

这有效：

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

CSS：调整包装上内联项的对齐方式

3 个答案: