Question

当浏览器窗口小于768px时，我正试图将两个块元素放在不同的行上。媒体查询告诉黄色和绿色div在响应视图中是块，但没有任何反应。如果将显示块应用于移动视图中的所有元素，则不会发生任何事情。

我认为块元素是100％宽并且在一行上运行？

#newsletter-wrap {
    width: 100%;
    height: auto;
    background: lightgrey;
    float: left;
    display: flex;
	justify-content: center;
	align-items: center;
    font-size: 22px;
    font-weight: 300;
    padding: 25px 25px;
    box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
    display: inline;
    vertical-align: middle;
}
#newsletter-button {
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
    border: 1px solid #333;
    cursor: pointer;
}
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#mce-EMAIL {
    background: pink;
    width: 300px;
    height: 25px;
    margin: 0 25px;
    border: 1px solid #333;
    text-align: center;
    padding: 4px;
}
#mc-embedded-subscribe-form {
    background: green;
    width: auto;
    text-align: center;
    height: auto;
    float: left;
}
#newsletter-wrap-text {
    background: yellow;
    width: auto;
    height: auto;
    float: left;
}


/* MOBILE */
@media handheld, screen and (max-width: 768px) {
    /* BELOW HAS A PROBLEM */
    #newsletter-wrap-text, #mc-embedded-subscribe-form {
        display: block;
    }
}

<section id="newsletter-wrap">
        <div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
        <form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>
	<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
    </section>

Answer 1

由于您已将display: flex设置为父节容器，因此必须设置flex-direction: column;才能在列中而不是在行中显示子元素。（或者你可以根本不使用display: flex并保留块元素，但我认为flex是出于某种原因，如响应性或其他原因）

顺便说一句，您也可以省略float: left，因为在这种情况下它没有效果。我一般建议稍微清理一下CSS。您正在使用display: flex;，但随后有浮动广告display: inline，然后又被display: block覆盖 - 这一切都是不必要的！

＆＃13;

#newsletter-wrap {
    width: 100%;
    height: auto;
    background: lightgrey;
    float: left;
    display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
    font-size: 22px;
    font-weight: 300;
    padding: 25px 25px;
    box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
    display: inline;
    vertical-align: middle;
}
#newsletter-button {
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
    border: 1px solid #333;
    cursor: pointer;
}
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#mce-EMAIL {
    background: pink;
    width: 300px;
    height: 25px;
    margin: 0 25px;
    border: 1px solid #333;
    text-align: center;
    padding: 4px;
}
#mc-embedded-subscribe-form {
    background: green;
    width: auto;
    text-align: center;
    height: auto;
    float: left;
}
#newsletter-wrap-text {
    background: yellow;
    width: auto;
    height: auto;
    float: left;
}


/* MOBILE */
@media handheld, screen and (max-width: 768px) {
    /* BELOW HAS A PROBLEM */
    #newsletter-wrap-text, #mc-embedded-subscribe-form {
        display: block;
    }
}

＆＃13;

<section id="newsletter-wrap">
        <div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
        <form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>
	<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
    </section>

＆＃13;

为什么这些块元素在同一条线上？

1 个答案: