html - CSS 媒体查询，防止 div 内容在小屏幕上溢出

问题描述

我试图阻止 div（“check-group”）的内容在较小的屏幕（如手机）上溢出父 div（“form-div”）。但没有任何效果。非常感谢任何帮助。我能做些什么来防止溢出？（这是我可以提供的细节。抱歉英语不好。）
提前致谢。

body {
  background-color: #16161d;
  color: #ffff;
  font-family: 'Roboto', sans-serif;
}

p,
legend {
  width: 100%;
  white-space: nowrap;
}

#form-div {
  background-color: #282C35;
  width: 70%;
  margin: auto;
  border: 1px solid #16161d;
  border-radius: 25px;
}

#survey-form {
  width: 50%;
  margin: auto;
  line-height: 3rem;
  font-size: 1.5rem;
}

input,
select,
option {
  width: 100%;
  height: 2.5rem;
  border: 1px solid #282C35;
  border-radius: 25px;
}

textarea {
  width: 100%;
}

input:focus,
select:focus,
option:focus,
button:focus,
textarea:focus {
  background-color: #808080;
  color: #ffff;
  outline: 3px solid invert;
}

input:hover,
input:hover::placeholder {
  color: #ffff;
}

input:focus::placeholder,
{
  color: #ffff
}

label,
input {
  display: flex;
}

.radio-set>input,
.radio-set>label {
  display: inline-block;
}

button {
  background-color: #16161d;
  color: #ffff;
  width: 100%;
  height: 3rem;
  border: 1px solid #282C35;
  border-radius: 25px;
  cursor: pointer;
}

sup {
  color: red;
}


/*Styling radio and check*/

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='radio'],
  input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

input[type="radio"] {
  height: 1.5rem;
  width: 1.5rem;
  background-color: #ffff;
  border-radius: 50%;
  cursor: pointer;
}

input[type="radio"]:hover {
  background-color: #5aaeed;
}

input[type="radio"]:checked {
  background-color: #2e92f0;
}

input[type="checkbox"] {
  background-color: #ffff;
  max-width: 1.5rem;
  max-height: 1.5rem;
  border-radius: 10%;
  cursor: pointer;
  float: left;
  margin-top: 10px;
}

input[type="checkbox"]:hover {
  background-color: #5aaeed;
}

input[type="checkbox"]:checked {
  background-color: #2e92f0;
}


/* media queries */

@media (max-width: 480px) {
  #form-div {
    width: 100%;
    margin: auto;
  }
  .check-group {}
}


/* Classes/Ids */

.center {
  text-align: center;
}

<h1 id="title" class="center">GYM REGISTERATION</h1>
<p id="description" class="center">Please fill all required fields</p>
<div id="form-div">
  <form id="survey-form">
    <div class="group">
      <label for="name" id="name-label">
      Name<sup>*</sup>
    </label>
      <input type="text" name="name" id="name" placeholder="Full Name" required />
    </div>
    <div class="group">
      <label for="email" id="email-label">
        Email<sup>*</sup>
      </label>
      <input type="email" id="email" name="email" placeholder="exapmle@exapmle.com" required />
    </div>
    <div class="group">
      <label for="number" id="number-label">
        Age<sup>*</sup>
      </label>
      <input type="number" id="number" name="age" placeholder="Enter your age" min="13" max="70" required />
    </div>
    <div class="radio-group">
      <fieldset class="radio-set">
        <legend>Gender</legend>
        <label for="male-for" id="male-label">
    Male
    </label>
        <input type="radio" name="gender" id="male-for" value="male">

        <label for="female-for" id="female-label">
    Female
    </label>
        <input type="radio" name="gender" id="female-for" value="female">
      </fieldset>
    </div>
    <div class="group">
      <p>Select your subscription<sup>*</sup></p>
      <select id="dropdown" name="subscription" required>
        <option disabled selected value>
          Select</option>
        <option>1 month (10$)</option>
        <option>1 year (100$) Save 20$</option>
      </select>
    </div>
    <div class="check-group">
      <fieldset>
        <legend>How do you stay in shape?</legend>
        <label for="fitness-classes">Fitness classes
            <input type="checkbox"
                  name="exercises"
                  value="classes"
                  id="fitness-classes"></label>
        <label for="weights">
            Weights
           <input type="checkbox"
                  name="exercises"
                  value="weights"
                  id="weights"></label>
        <label for="jogging">
            Jogging
           <input type="checkbox"
                  name="exercises"
                  value="jogging"
                  id="jogging"></label>
        <label for="cardio-machines">
            Cardio machines
           <input type="checkbox"
                  name="exercises"
                  value="cardio machines"
                  id="cardio-machines"></label>
        <label for="swimming">
            Swimming
           <input type="checkbox"
                  name="exercises"
                  value="swimming"
                  id="swimming"></label>
        <label for="team-sports">
            Team sports
           <input type="checkbox"
                  name="exercises"
                  value="team sports"
                  id="team-sports"></label>
        <label for="other">
            Other
           <input type="checkbox"
                  name="exercises"
                  value="other"
                  id="other"></label>
      </fieldset>
    </div>
    <div class="textarea">
      <p>Any comments?</p>
      <textarea></textarea>
    </div>
    <button type="submit" id="submit">Submit</button>
  </form>
</div>

标签： htmlcss

html - CSS 媒体查询，防止 div 内容在小屏幕上溢出

问题描述

解决方案

推荐阅读