如何水平制作复选框？答案

【问题标题】：how to make checkbox in horizontally?如何水平制作复选框？
【发布时间】：2023-03-03 16:29:01
【问题描述】：

我正在尝试水平制作复选框。我正在 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>

【问题讨论】：

您的复选框位于li 标签中，默认情况下是块元素。要内联显示它们，请将 li 设为 display: inline-block;'
好的，我会尝试更新你
它工作请检查预览按钮。但是如何设置背景颜色play.ionic.io/app/b3aef6f66f08 .green background of checkbox
好的，但要意识到，由于复选框文本的宽度，它们可能仍会堆叠，因为一行中没有多个复选框的空间。
我知道了，请检查预览。唯一的问题是如何在选中复选框时将背景颜色设置为绿色

标签： javascript jquery angularjs css ionic-framework

【解决方案1】：

添加以下 css 使选中的复选框变为绿色：

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

【讨论】：