css 如何水平对齐列中的复选框

l2osamch  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(147)

我的问题源于this
我想在4列中水平对齐复选框

<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>TEST</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </head>
  <body>
     <div class="row">
        <div class="col-md-12">
            <form action='' method="POST" novalidate>
                <div>
                    <div>
                        <label>GROUP 1</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_1" name="0_1">
                        <label for="0_1">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_2" name="0_2">
                        <label for="0_2">CK1_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_3</label>
                          </div>
                    </div>
                    </div>
            <br/>
                    <div>
                        <label>GROUP 2</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_1" name="1_1">
                        <label for="1_1">CK2_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_2" name="1_2">
                        <label for="1_2">CK2_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_3" name="1_3">
                        <label for="1_3">CK2_3</label>
                          </div>
                        </div>
                    </div>
                </div>       
         </form>
        </div>
     </div>
  </body>
</html>

问题是，当我有10个以上的复选框时，它们会与标签正确对齐，但对于较少的复选框，正如你在上面的片段中看到的，渲染并不和谐

<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>TEST</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </head>
  <body>
     <div class="row">
        <div class="col-md-12">
            <form action='' method="POST" novalidate>
                <div>
                    <div>
                        <label>GROUP 1</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_1" name="0_1">
                        <label for="0_1">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_2" name="0_2">
                        <label for="0_2">CK1_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_3</label>
                          </div>
                          
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                        </div>
                    </div>
                    <div>
                        <label>GROUP 2</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_1" name="1_1">
                        <label for="1_1">CK2_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_2" name="1_2">
                        <label for="1_2">CK2_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_3" name="1_3">
                        <label for="1_3">CK2_3</label>
                          </div>
                        </div>
                    </div>
                </div>       
                </form>
        </div>
     </div>
  </body>
</html>
css

2条答案

按热度按时间
bxfogqkk

bxfogqkk1#

您可以使用网格显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            gap: 10px;
        }

        .content {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
    </div>
</body>
</html>

如果这不是你要找的，告诉我。我很乐意帮忙

赞(0）分享  回复(0）举报  2023-06-25
flvlnr44

flvlnr442#

可以使用Flexbox。当flex-direction为column时，您可以限制容器的高度（这里为max-height: 30vh），项目（<label>）将开始形成列。但要控制列数、高度和“项目”的数量真的很难。

fieldset {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 30vh;
  border: none;
  gap: .5em 0;
  margin: 0;
}

legend {
  font-weight: bold;
}

label {
  width: 25%;
}
<form name="form01">
  <fieldset name="group1">
    <legend>Group 1</legend>
    <label><input type="checkbox" name="check1">Checkbox 1</label>
    <label><input type="checkbox" name="check2">Checkbox 2</label>
    <label><input type="checkbox" name="check3">Checkbox 3</label>
    <label><input type="checkbox" name="check4">Checkbox 4</label>
    <label><input type="checkbox" name="check5">Checkbox 5</label>
    <label><input type="checkbox" name="check6">Checkbox 6</label>
    <label><input type="checkbox" name="check7">Checkbox 7</label>
    <label><input type="checkbox" name="check8">Checkbox 8</label>
    <label><input type="checkbox" name="check9">Checkbox 9</label>
  </fieldset>
  <fieldset name="group2">
    <legend>Group 2</legend>
    <label><input type="checkbox" name="check10">Checkbox 10</label>
    <label><input type="checkbox" name="check11">Checkbox 11</label>
    <label><input type="checkbox" name="check12">Checkbox 12</label>
  </fieldset>
</form>

您也可以将项目排成一行。这是一个非常灵活的，你不需要指定一个高度。如果每个<label>的宽度都是25%，那么你就有4列。

fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: none;
  gap: .5em 0;
  margin: 0;
}

legend {
  font-weight: bold;
}

label {
  width: 25%;
}
<form name="form01">
  <fieldset name="group1">
    <legend>Group 1</legend>
    <label><input type="checkbox" name="check1">Checkbox 1</label>
    <label><input type="checkbox" name="check2">Checkbox 2</label>
    <label><input type="checkbox" name="check3">Checkbox 3</label>
    <label><input type="checkbox" name="check4">Checkbox 4</label>
    <label><input type="checkbox" name="check5">Checkbox 5</label>
    <label><input type="checkbox" name="check6">Checkbox 6</label>
    <label><input type="checkbox" name="check7">Checkbox 7</label>
    <label><input type="checkbox" name="check8">Checkbox 8</label>
    <label><input type="checkbox" name="check9">Checkbox 9</label>
  </fieldset>
  <fieldset name="group2">
    <legend>Group 2</legend>
    <label><input type="checkbox" name="check10">Checkbox 10</label>
    <label><input type="checkbox" name="check11">Checkbox 11</label>
    <label><input type="checkbox" name="check12">Checkbox 12</label>
  </fieldset>
</form>
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com