新建一行復選框-有解無憂

我目前有 10 個連續的復選框，但是它非常擁擠。我寧愿在 2 行中有 5 個復選框，但不知道如何實作這一點。

我是 HTML 的新手，所以我可能會忘記一些簡單的事情。我嘗試了幾種方法，但似乎沒有任何效果。（為了以防萬一，我保留了所有代碼，但標記了所有內容的位置。復選框位于底部。）

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

HTML

<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

@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;
}

uj5u.com熱心網友回復：

此方法使用 flexbox 完全回應。它只需要添加 1 行：flex-wrap: wrap;to .checkbox-row。

@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;
}

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

@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;
}

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

uj5u.com熱心網友回復：

用 2 個 div 包裹復選框，并將其添加到您的案例中的父 divcheckbox-row和flex-direction: row;子 div。

代碼筆

.checkbox-row {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

uj5u.com熱心網友回復：

您可以flex-flow: row wrap;用于 flexbox 容器和flex: 0 0 20%;子元素。

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

.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;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/364912.html

標籤：html css 形式复选框排

上一篇：Python-在第一個IF條件下停止

下一篇：如何將文本框輸入欄位的值傳遞給jQuery中的單選按鈕的值