文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >创建新的一行复选框

问创建新的一行复选框
EN

Stack Overflow用户
提问于 2021-11-24 13:57:14
回答 3查看 481关注 0票数 0

我有10个复选框在一排，但它是非常拥挤的。我宁愿在2行中有5个复选框，但不知道如何实现这一点。

我对HTML很陌生，所以我可能忘记了一些简单的东西。我试过几种方法，但似乎没有用。(为了以防万一，我留下了所有的代码，但贴上了所有东西的标签。)复选框位于底部。)

链接：https://codepen.io/Tantlu/full/JjyQYZw

HTML

代码语言：javascript
复制
<body>
  <div class="video-bg">
 <video width="320" height="240" autoplay loop muted>
  <source src="https://assets.codepen.io/3364143/7btrrd.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
  
<!-- Header -->  
  
<h1>Design Survey.</h1>  

<!-- Form -->  
  
<form class="form">
  
 <!-- Form Element 1 --> 
  
 <div class="form-control">
   <label for="name" class="label-name">
     Name
   </label>
  <input type= "text" id= "name" placeholder= ""/>
        </div>
  
  <div class="form-control">
   <label for="email" class="label-email">
     Email
   </label>
  <input type="email" id= "email" placeholder= "" />
        </div>
  
  <div class="form-control">
   <label for="age" class="label-age">
     Age
   </label>
  <input type= "number" id= "age" placeholder= ""/>
        </div>
  
  <!-- Drop Down Box -->
  
  <div class="form-control">
    <label for="edu" id="label-edu">
       What is your education level?
    </label>
    
   <div class="options"> 
    <select name="edu" id="dropdown">
      <option hidden></option>
      <option value="high-school">High School</option>
      <option value="cert-4">Certificate IV</option>
      <option value="diploma">Diploma</option>
      <option value="b-degree">Bachelors Degree</option>
      <option value="m-degree">Masters Degree</option>
     </select>
    </div>  
  </div>      
    
    
<div class="form-control">
  <label>Do you like this design?</label>
 
<!-- Radio Buttons -->
  
 <div class="rad-row"> 
  <label for="rad1" class="rc-label">
    <input type="radio" id="rad1" name="radio">
    <span class="rc-text">Yes</span>
    </input>
  </label>
  
  <label for="rad2" class="rc-label">
    <input type="radio" id="rad2" name="radio">
    <span class="rc-text">No</span> 
    </input>
  </label>
  
  <label for="rad3" class="rc-label">
    <input type="radio" id="rad3" name="radio">
    <span class="rc-text">Unsure</span> 
    </input>
  </label>
  </div>
</div>

<!-- Checkboxes -->

<div class="form-control">
  <label class="label2">Languages and frameworks known</label>

<div class= "checkbox-row">
<label for="inp-1" class="rc-label">
   <input type="checkbox" id="inp-1" name="inp">
  <span class="rc-text">C</span>
  </input>
 </label>
   
<label for="inp-2" class="rc-label">
   <input type="checkbox" name="inp" id="inp-2">
  <span class="rc-text">C++</span>
  </input>
 </label>

<label for="inp-3" class="rc-label">
   <input type="checkbox" name="inp" id="inp-3">
  <span class="rc-text">C#</span>
  </input>
 </label>

<label for="inp-4" class="rc-label">
   <input type="checkbox" id="inp-4" name="inp">
  <span class="rc-text">Java</span>
  </input>
 </label>

<label for="inp-5" class="rc-label">
   <input type="checkbox" id="inp-5" name="inp">
  <span class="rc-text">Python</span>
  </input>
 </label>

<label for="inp-6" class="rc-label">
   <input type="checkbox" id="inp-6" name="inp">
  <span class="rc-text">JavaScript</span>
  </input>
 </label>

<label for="inp-7" class="rc-label">
   <input type="checkbox" id="inp-7" name="inp">
  <span class="rc-text">React</span>
  </input>
 </label>

<label for="inp-8" class="rc-label">
   <input type="checkbox" id="inp-8" name="inp">
  <span class="rc-text">HTML</span>
  </input>
 </label>

<label for="inp-9" class="rc-label">
   <input type="checkbox" id="inp-9" name="inp">
  <span class="rc-text">Solidity</span>
  </input>
 </label>

<label for="inp-10" id="inp-1" class="rc-label">
   <input type="checkbox" id="inp-10" name="inp">
  <span class="rc-text">Spring</span>
  </input>
 </label>
</div>  
</div>  
</form>
</body>

CSS

代码语言：javascript
复制
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}

/* Background */

.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

/* Header */

h1 {
  position: relative;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  top: 0;
  font-size: 45px;
}

/* Form */

.form {
  max-width: 700px;
  margin: 50px auto; 
  background-color: rgba(16 18 27 / 30%);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 30px 30px;
}

/* Form Items */

.form-control {
  text-align: left;
  margin-bottom: 25px;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.form-control label {
  display: block;
  margin-bottom: 15px;
}

.form-control input, 
.form-control select, 
.form-control textarea {
  background: rgba(16 18 27 / 35%);
  width: 97%;
  border: none;
  border-radius: 4px;
  padding: 10px;
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
}

/* Dropdown Box */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  width: 100% !important; 
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 10;
  position: relative;
  background: transparent;
}

.options {
  position: relative;
  margin-bottom: 25px;
}

.options::after {
  content: ">";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 6px;
  right: 15px;
  position: absolute;
  z-index: 0;
}

/* Radio Buttons & Checkboxes */

.form-control input[type="radio"],
.form-control input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

.rc-label {
  border-radius: 100px;
  padding: 10px 10px;
  cursor: pointer;
  transition: .3s;
  flex: 1;
}

.rc-label:hover,
.rc-label:focus-within {
  background: hsla(0, 0%, 80%, .14);
}

.rc-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}

/* Radio Buttons */

.rad-row {
  display: flex;
  margin-bottom: -20px;
}

/* Checkboxes */

.checkbox-row {
  display: flex;
}
css
forms
checkbox
row
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-11-24 14:33:34

这种方法是完全响应使用挠性盒。它只需要在.checkbox-row中添加一行：.checkbox-row。

​

代码语言：javascript
复制
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}


/* Background */

.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Header */

h1 {
  position: relative;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  top: 0;
  font-size: 45px;
}


/* Form */

.form {
  max-width: 700px;
  margin: 50px auto;
  background-color: rgba(16 18 27 / 30%);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 30px 30px;
}


/* Form Items */

.form-control {
  text-align: left;
  margin-bottom: 25px;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.form-control label {
  display: block;
  margin-bottom: 15px;
}

.form-control input,
.form-control select,
.form-control textarea {
  background: rgba(16 18 27 / 35%);
  width: 97%;
  border: none;
  border-radius: 4px;
  padding: 10px;
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
}


/* Dropdown Box */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  width: 100% !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 10;
  position: relative;
  background: transparent;
}

.options {
  position: relative;
  margin-bottom: 25px;
}

.options::after {
  content: ">";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 6px;
  right: 15px;
  position: absolute;
  z-index: 0;
}


/* Radio Buttons & Checkboxes */

.form-control input[type="radio"],
.form-control input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

.rc-label {
  border-radius: 100px;
  padding: 10px 5px;
  cursor: pointer;
  transition: .3s;
  flex: 0 1 calc(20% - 10px);
  max-width: 130px;
}

.rc-label:hover,
.rc-label:focus-within {
  background: hsla(0, 0%, 80%, .14);
}

.rc-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}


/* Radio Buttons */

.rad-row {
  display: flex;
  margin-bottom: -20px;
}


/* Checkboxes */

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
}
代码语言：javascript
复制
<body>
  <div class="video-bg">
    <video width="320" height="240" autoplay loop muted>
  <source src="https://assets.codepen.io/3364143/7btrrd.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
  </div>

  <!-- Header -->

  <h1>Design Survey.</h1>

  <!-- Form -->

  <form class="form">

    <!-- Form Element 1 -->

    <div class="form-control">
      <label for="name" class="label-name">
     Name
   </label>
      <input type="text" id="name" placeholder="" />
    </div>

    <div class="form-control">
      <label for="email" class="label-email">
     Email
   </label>
      <input type="email" id="email" placeholder="" />
    </div>

    <div class="form-control">
      <label for="age" class="label-age">
     Age
   </label>
      <input type="number" id="age" placeholder="" />
    </div>

    <!-- Drop Down Box -->

    <div class="form-control">
      <label for="edu" id="label-edu">
       What is your education level?
    </label>

      <div class="options">
        <select name="edu" id="dropdown">
          <option hidden></option>
          <option value="high-school">High School</option>
          <option value="cert-4">Certificate IV</option>
          <option value="diploma">Diploma</option>
          <option value="b-degree">Bachelors Degree</option>
          <option value="m-degree">Masters Degree</option>
        </select>
      </div>
    </div>


    <div class="form-control">
      <label>Do you like this design?</label>

      <!-- Radio Buttons -->

      <div class="rad-row">
        <label for="rad1" class="rc-label">
    <input type="radio" id="rad1" name="radio">
    <span class="rc-text">Yes</span>
    </input>
  </label>

        <label for="rad2" class="rc-label">
    <input type="radio" id="rad2" name="radio">
    <span class="rc-text">No</span> 
    </input>
  </label>

        <label for="rad3" class="rc-label">
    <input type="radio" id="rad3" name="radio">
    <span class="rc-text">Unsure</span> 
    </input>
  </label>
      </div>
    </div>

    <!-- Checkboxes -->

    <div class="form-control">
      <label class="label2">Languages and frameworks known</label>

      <div class="checkbox-row">
        <label for="inp-1" class="rc-label">
   <input type="checkbox" id="inp-1" name="inp">
  <span class="rc-text">C</span>
  </input>
 </label>

        <label for="inp-2" class="rc-label">
   <input type="checkbox" name="inp" id="inp-2">
  <span class="rc-text">C++</span>
  </input>
 </label>

        <label for="inp-3" class="rc-label">
   <input type="checkbox" name="inp" id="inp-3">
  <span class="rc-text">C#</span>
  </input>
 </label>

        <label for="inp-4" class="rc-label">
   <input type="checkbox" id="inp-4" name="inp">
  <span class="rc-text">Java</span>
  </input>
 </label>

        <label for="inp-5" class="rc-label">
   <input type="checkbox" id="inp-5" name="inp">
  <span class="rc-text">Python</span>
  </input>
 </label>

        <label for="inp-6" class="rc-label">
   <input type="checkbox" id="inp-6" name="inp">
  <span class="rc-text">JavaScript</span>
  </input>
 </label>

        <label for="inp-7" class="rc-label">
   <input type="checkbox" id="inp-7" name="inp">
  <span class="rc-text">React</span>
  </input>
 </label>

        <label for="inp-8" class="rc-label">
   <input type="checkbox" id="inp-8" name="inp">
  <span class="rc-text">HTML</span>
  </input>
 </label>

        <label for="inp-9" class="rc-label">
   <input type="checkbox" id="inp-9" name="inp">
  <span class="rc-text">Solidity</span>
  </input>
 </label>

        <label for="inp-10" id="inp-1" class="rc-label">
   <input type="checkbox" id="inp-10" name="inp">
  <span class="rc-text">Spring</span>
  </input>
 </label>
      </div>
    </div>
  </form>
</body>

​

下面是另一个以5行开始的版本，如您在注释中提到的(所有更改都在.rc-label中)

​

代码语言：javascript
复制
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}


/* Background */

.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Header */

h1 {
  position: relative;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  top: 0;
  font-size: 45px;
}


/* Form */

.form {
  max-width: 700px;
  margin: 50px auto;
  background-color: rgba(16 18 27 / 30%);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 30px 30px;
}


/* Form Items */

.form-control {
  text-align: left;
  margin-bottom: 25px;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.form-control label {
  display: block;
  margin-bottom: 15px;
}

.form-control input,
.form-control select,
.form-control textarea {
  background: rgba(16 18 27 / 35%);
  width: 97%;
  border: none;
  border-radius: 4px;
  padding: 10px;
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
}


/* Dropdown Box */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  width: 100% !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 10;
  position: relative;
  background: transparent;
}

.options {
  position: relative;
  margin-bottom: 25px;
}

.options::after {
  content: ">";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 6px;
  right: 15px;
  position: absolute;
  z-index: 0;
}


/* Radio Buttons & Checkboxes */

.form-control input[type="radio"],
.form-control input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

.rc-label {
  border-radius: 100px;
  padding: 10px 5px;
  cursor: pointer;
  transition: .3s;
  flex: 0 1 calc(20% - 10px);
  max-width: 130px;
}

.rc-label:hover,
.rc-label:focus-within {
  background: hsla(0, 0%, 80%, .14);
}

.rc-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}


/* Radio Buttons */

.rad-row {
  display: flex;
  margin-bottom: -20px;
}


/* Checkboxes */

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
}
代码语言：javascript
复制
<body>
  <div class="video-bg">
    <video width="320" height="240" autoplay loop muted>
      <source src="https://assets.codepen.io/3364143/7btrrd.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
  </div>

  <!-- Header -->

  <h1>Design Survey.</h1>

  <!-- Form -->

  <form class="form">

    <!-- Form Element 1 -->

    <div class="form-control">
      <label for="name" class="label-name">
         Name
       </label>
      <input type="text" id="name" placeholder="" />
    </div>

    <div class="form-control">
      <label for="email" class="label-email">
         Email
       </label>
      <input type="email" id="email" placeholder="" />
    </div>

    <div class="form-control">
      <label for="age" class="label-age">
         Age
       </label>
      <input type="number" id="age" placeholder="" />
    </div>

    <!-- Drop Down Box -->

    <div class="form-control">
      <label for="edu" id="label-edu">
           What is your education level?
        </label>

      <div class="options">
        <select name="edu" id="dropdown">
          <option hidden></option>
          <option value="high-school">High School</option>
          <option value="cert-4">Certificate IV</option>
          <option value="diploma">Diploma</option>
          <option value="b-degree">Bachelors Degree</option>
          <option value="m-degree">Masters Degree</option>
        </select>
      </div>
    </div>


    <div class="form-control">
      <label>Do you like this design?</label>

      <!-- Radio Buttons -->

      <div class="rad-row">
        <label for="rad1" class="rc-label">
        <input type="radio" id="rad1" name="radio">
        <span class="rc-text">Yes</span>
        </input>
      </label>

        <label for="rad2" class="rc-label">
        <input type="radio" id="rad2" name="radio">
        <span class="rc-text">No</span> 
        </input>
      </label>

        <label for="rad3" class="rc-label">
        <input type="radio" id="rad3" name="radio">
        <span class="rc-text">Unsure</span> 
        </input>
      </label>
      </div>
    </div>

    <!-- Checkboxes -->

    <div class="form-control">
      <label class="label2">Languages and frameworks known</label>

      <div class="checkbox-row">
        <label for="inp-1" class="rc-label">
       <input type="checkbox" id="inp-1" name="inp">
      <span class="rc-text">C</span>
      </input>
     </label>

        <label for="inp-2" class="rc-label">
       <input type="checkbox" name="inp" id="inp-2">
      <span class="rc-text">C++</span>
      </input>
     </label>

        <label for="inp-3" class="rc-label">
       <input type="checkbox" name="inp" id="inp-3">
      <span class="rc-text">C#</span>
      </input>
     </label>

        <label for="inp-4" class="rc-label">
       <input type="checkbox" id="inp-4" name="inp">
      <span class="rc-text">Java</span>
      </input>
     </label>

        <label for="inp-5" class="rc-label">
       <input type="checkbox" id="inp-5" name="inp">
      <span class="rc-text">Python</span>
      </input>
     </label>

        <label for="inp-6" class="rc-label">
       <input type="checkbox" id="inp-6" name="inp">
      <span class="rc-text">JavaScript</span>
      </input>
     </label>

        <label for="inp-7" class="rc-label">
       <input type="checkbox" id="inp-7" name="inp">
      <span class="rc-text">React</span>
      </input>
     </label>

        <label for="inp-8" class="rc-label">
       <input type="checkbox" id="inp-8" name="inp">
      <span class="rc-text">HTML</span>
      </input>
     </label>

        <label for="inp-9" class="rc-label">
       <input type="checkbox" id="inp-9" name="inp">
      <span class="rc-text">Solidity</span>
      </input>
     </label>

        <label for="inp-10" id="inp-1" class="rc-label">
       <input type="checkbox" id="inp-10" name="inp">
      <span class="rc-text">Spring</span>
      </input>
     </label>
      </div>
    </div>
  </form>
</body>

​

票数 1
EN

Stack Overflow用户

发布于 2021-11-24 14:03:09

用2个div包装复选框，并将其添加到父div(在您的例子中是checkbox-row )和flex-direction: row;到子div中。

码页

代码语言：javascript
复制
.checkbox-row {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
票数 1
EN

Stack Overflow用户

发布于 2021-11-24 14:28:35

您可以对柔性箱容器使用flex-flow: row wrap;，对子元素使用flex: 0 0 20%;。

https://codepen.io/relaxen/pen/JjyQydq?editors=0100

代码语言：javascript
复制
.rc-label {
  flex: 0 0 20%;
  border-radius: 100px;
  padding: 10px 10px;
  cursor: pointer;
  transition: 0.3s;
  box-sizing: border-box;
}
.checkbox-row {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70097394

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档