为什么此表格不坚持“正当内容:中心"?由其父容器设置? [英] Why doesn't this form stick to "justify-content: center" set by its parent container?
本文介绍了为什么此表格不坚持“正当内容:中心"?由其父容器设置?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我缩小屏幕时，联系表单会隐藏我在其父容器中设置的属性.一切都很好，直到某个点，然后表格突然跳到左边，右边有很多空白.我无法理解为什么会发生这种情况，因为h2和p标签正在执行应做的事情并且表单是孩子.
As I shrink the screen the contact form ditches the properties that I set in its parent container. Everything is fine up until a certain point then suddenly the form jumps to the left with lots of right margin. I can't get my head around why this is happening as the h2 and p tag is doing what it's supposed to do and the form is a child.
/* Section 6 */
.container6-heading {
margin: 60px auto;
max-width: 1170px;
text-align: center;
display: flex;
justify-content: center;
flex: 0 0 calc(50% - 30px);
}
/* Contact Form Homepage */
.form {
width: 60vw;
display: flex;
flex-direction: column;
justify-content: center;
flex: 0 0 calc(100% - 20px);
}
.home-name {
width: 100%;
height: 38px;
margin-bottom: 1em;
}
.home-phone {
height: 38px;
margin-bottom: 1em;
width: 29.5vw;
}
.home-email {
width: 29.5vw;
height: 38px;
margin-bottom: 1em;
}
.flex-container {
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.home-message {
width: 100%;
height: 167px;
}
#input {
background: #ffffff;
border: 1px solid #eaeaea;
}
.form-button {
margin: 20px auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.home-message-contact {
margin-top: 20px;
}
input {
text-indent: 10px;
}
textarea {
text-indent: 10px;
}<html>
<body>
<section class="container6-heading">
<div class="section6-heading">
<h2>Nunc varius nec orci eget dictum</h2>
<div class="section6-text">
<p>Mauris vel lorem a tortor eleifend blandit a porttitor ligula.<br> Sed nunc erat, interdum sed lorem ac, efficitur sagittis tortor<br> tortor.</p>
</div>
<div class="form">
<div class="name-form">
<input type="text" placeholder="Name" class="home-name" id="input" required>
</div>
<div class="flex-container">
<div class="phone-form">
<input type="text" placeholder="Phone" class="home-phone" id="input" required>
</div>
<div class="email-form">
<input type="text" placeholder="Email" class="home-email" id="input" required>
</div>
</div>
<div class="message-form">
<textarea type="text" placeholder="Message" class="home-message" id="input" required></textarea>
</div>
<div class="form-button">
<button class="home-message-contact" type="submit">Submit</button>
</div>
</div>
</div>
</section>
</body>
</html>推荐答案
固定宽度可能会造成问题.删除窗体的宽度似乎有所帮助.参见下面的代码片段-
Having fixed-width might be creating the problem. Removing the width for form seems to help. See this code snippet below -
/* Section 6 */
.container6-heading {
margin: 60px auto;
max-width: 1170px;
text-align: center;
display: flex;
justify-content: center;
flex: 0 0 calc(50% - 30px);
}
/* Contact Form Homepage */
.form {
display: flex;
flex-direction: column;
justify-content: center;
flex: 0 0 calc(100% - 20px);
}
.home-name {
width: 100%;
height: 38px;
margin-bottom: 1em;
}
.home-phone {
height: 38px;
margin-bottom: 1em;
}
.home-email {
height: 38px;
margin-bottom: 1em;
}
.flex-container {
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.home-message {
width: 100%;
height: 167px;
}
#input {
background: #ffffff;
border: 1px solid #eaeaea;
}
.form-button {
margin: 20px auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.home-message-contact {
margin-top: 20px;
}
input {
text-indent: 10px;
}
textarea {
text-indent: 10px;
}<html>
<body>
<section class="container6-heading">
<div class="section6-heading">
<h2>Nunc varius nec orci eget dictum</h2>
<div class="section6-text">
<p>Mauris vel lorem a tortor eleifend blandit a porttitor ligula.<br> Sed nunc erat, interdum sed lorem ac, efficitur sagittis tortor<br> tortor.</p>
</div>
<div class="form">
<div class="name-form">
<input type="text" placeholder="Name" class="home-name" id="input" required>
</div>
<div class="flex-container">
<div class="phone-form">
<input type="text" placeholder="Phone" class="home-phone" id="input" required>
</div>
<div class="email-form">
<input type="text" placeholder="Email" class="home-email" id="input" required>
</div>
</div>
<div class="message-form">
<textarea type="text" placeholder="Message" class="home-message" id="input" required></textarea>
</div>
<div class="form-button">
<button class="home-message-contact" type="submit">Submit</button>
</div>
</div>
</div>
</section>
</body>
</html>这篇关于为什么此表格不坚持“正当内容:中心"?由其父容器设置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
