媒体查询、居中视区和倾斜边距

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

我实际上想通了。 我去掉了位置：相对，左：25%从 #testsec 和 #forms ID中输入：自动。像魅力一样工作。希望这可以帮助其他人在 CSS 中定位元素。