我對 RWD CSS 更改有疑問。我不知道怎么寫。我的英語不好，但我盡量完整地表達我的問題。
問題是當網站在移動版時，線條在螢屏的兩側對齊，但在桌面設備上，線條必須與下側間隔32px。但是，此頁面的其他部分在手機和桌面上都是必需的。左右之間保持一個32px的空間，所以我直接在父圖層內容中寫了padding:0px 32px；
但這是否意味著當手機在手機上時，灰線應該與左側和右側對齊？不知道父圖層內容的CSS設定padding是否保持：0px 32px; 我們還能讓 hr 標簽在手機和臺式機上顯示不同嗎？
謝謝
.content {
padding: 0 32px;
}
.content .menu {
list-style:none;
display: flex;
margin-bottom: 16px;
}
.content .menu .menu_item:nth-child(1) {
margin-right: 16px;
}
.content p {
font-size: 12px;
}<div class="content">
<ul class='menu'>
<li class="menu_item">about</li>
<li class="menu_item">service</li>
</ul>
<hr>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, amet doloribus neque totam libero excepturi dolor ducimus corrupti reprehenderit! Deserunt.</p>
</div>
uj5u.com熱心網友回復：
所以，我認為這里發生了一些事情。對不起，如果我對你問的有什么誤解！
首先，padding始終在被定義的元素內作業。因此，您的content元素是這里的頂級元素（其他所有內容都在其中）。因為content元素的左右邊距為 32 像素，這意味著邊緣旁邊有 32 像素的空間，不允許內容進入（除非您開始position在子元素上使用設定）。因此，在這種情況下，如果您希望hr在螢屏上邊到邊顯示，則必須將其放在content塊之外（或擺弄其寬度和位置）。
其次，如果您希望在不同的視窗大小（例如在移動電話和桌面上）應用不同的效果，您將需要使用@media-query. 這使您可以撰寫 CSS，在滿足某些條件時覆寫默認的類定義。因此，您可以例如說：
.content {
padding: 0 32px
}
@media-query(max-width: 600px) {
.content {
padding: 0;
}
}
這意味著，默認情況下，content該類將具有填充。但如果滿足@media-query條件（這里，視窗小于 600px），則填充設定為 0。
我希望給你足夠的資訊來解決你的問題！
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/322358.html
上一篇：減OR運算子