Question

我正在尝试使我的#titlesec和#forms ID等于或小于500px时占据视口的100％。问题是，不仅不这样做，而且实际上存在偏差。如果您可以通过chrome开发人员工具检查它们，您会发现边界一直延伸到视口的右侧。

这是我的HTML ...

  <h1 id="title">
      Customer Survey Form
    </h1> 
    <p id="description">Tell us what you think about our product</p>
    </div>

    <div id="forms">
    <form id="survey-form-1">
      <p id="name">Name: <input type="text" placeholder="Full Name"></p>
      <p id="number">Number: <input type="number"  placeholder="10 digits here""></p>
      <p id="email">Email: <input type="text" placeholder="put your email here"></p>
      <p id="email"  >Password: <input type="password" placeholder="password"></p>

    </form>
        <br>
        <p>
             <label>How would you describe yourself?</label>
          <br>
             <select id= "myList">
               <option value = "student">Student</option>
               <option value = "child">Child</option>
               <option value = "parent">Parent</option>

             </select>
          </p>
          <br>
        <form id="survey-form-2">
        <p> Q: How satisfied are you with our product?</p>
        <br>
        <input type="radio" name="satisfaction" value="Very Satisfied" checked> Very Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Satisfied" > Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Kinda Satisfied"> Kinda Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Not Satisfied"> Not Satisfied </input>
        <br>
        <br>

        <p> Q: What do you like about our product?</p>
         <input type="checkbox" name="likes" value="likes" checked> The product is reliable </input>
        <br>
        <input type="checkbox" name="likes" value="Satisfied" > The the kids love it </input>
        <br>
        <input type="checkbox" name="likes" value="Kinda Satisfied"> The product is fun </input>
        <br>
        <input type="checkbox" name="likes" value="Not Satisfied">The product is long lasting </input>

        </form>
        </div>

这是我的CSS ...

body {
background-color:#3385FF;  
}

#title-sec {
  display: flex;
  flex-direction: column;
  background-color: white;
  width:50%;
  height: 150px;
  position: relative;
  left: 25%;
  margin-top:-7px;
  margin-bottom: 10px;

}


h1 {
  text-align: center;
}

p {
  text-align: center;
}

#forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background: white;
  width: 50%;
  position: relative;
  left: 25%;
}
#survey-form-1 {
  text-align: center;
  padding-top: 20px;
}

#survey-form-2 {
  text-align:center;
}

input {
  text-align: center;
}


@media only screen and (max-width: 500px) {

  #title-sec {

  display: flex;
  flex-direction: column;
   align-items: stretch;
  background-color: white;
  width:-75%;
  height: 150px;
  padding-bottom: 20px;
  margin-bottom: 20px;
margin-right: 131.25;

width:75%;    
}

  #forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background-color: white;
  align-items: center; 
  width: 100%;  

  }
}

如果您需要更多信息，或者需要我澄清任何事情，请告诉我。

Answer 1

放置在CSS文件的底部：

@media (max-width: 500px) {
  #titlesec {
    /*Put your argument with 100% Eg. width: 100%*/
  }
  #forms {
    /*Put your argument with 100% Eg. width: 100%*/
  }
}

对于偏斜的文本，请尝试以下操作：

#titlesec, #forms {  
   white-space: pre-wrap;      /* Webkit */    
   white-space: -moz-pre-wrap; /* Firefox */     
   white-space: -pre-wrap;     /* Opera <7 */    
   white-space: -o-pre-wrap;   /* Opera 7 */     
   word-wrap: break-word;      /* IE */ 
}

就是这样：

@media (max-width: 500px) {
      #titlesec, #forms {  
         white-space: pre-wrap;      /* Webkit */    
         white-space: -moz-pre-wrap; /* Firefox */     
         white-space: -pre-wrap;     /* Opera <7 */    
         white-space: -o-pre-wrap;   /* Opera 7 */     
         word-wrap: break-word;      /* IE */ 
      }

      #titlesec {
        /*Put your argument with 100% Eg. width: 100%*/
      }
      #forms {
        /*Put your argument with 100% Eg. width: 100%*/
      }
    }

希望对您有所帮助；）

Answer 2

我实际上知道了。我从#testsec和#forms ID中删除了位置：相对，并离开了：25％，而是输入了margin：auto。像魅力一样工作。希望这可以帮助其他在CSS中定位元素困扰的人。

媒体查询，视口居中和页边距偏斜

2 个答案: