时间戳

首页 > 解决方案 > 关于rwd的布局

html - 关于rwd的布局

问题描述

我对 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>

在此处输入图像描述

标签： htmlcss

解决方案

所以，我认为这里发生了几件事。对不起，如果我对你的要求有什么问题！

首先，padding始终在被定义的元素内工作。因此，您的content元素是这里的顶级元素（其他所有元素都在其中）。因为content元素的左右填充为 32px，这意味着在边缘旁边有 32 个像素的空间，不允许任何内容进入（除非您开始position在子元素上使用设置）。所以，在这种情况下，如果你想让你hr在屏幕上边到边，你必须把它放在content块之外（或者摆弄它的宽度和位置）。

其次，如果您希望在不同的窗口大小（例如在手机和桌面上）应用不同的效果，您将需要使用@media-query. 这使您可以编写在满足某些条件时覆盖默认类定义的 CSS。因此，例如，您可以说：

.content {
  padding: 0 32px
}

@media-query(max-width: 600px) {
  .content {
    padding: 0;
  }
}

这意味着，默认情况下，content该类将具有填充。但是如果满足@media-query条件（这里，窗口小于 600 像素），则将 padding 设置为 0。

我希望能给你足够的信息来解决你的问题！

推荐阅读