0

为了便于解释，我将直接跳到代码中。我有一个简单的手风琴菜单，可以自动从另一个 html 文件加载和插入图片库（带有标题文本），如下所示：

<section>
    <a class="box-link" href="#.html">Link 1</a>
        <div class="image-gallery">
            <img src="1.jpg"> [...]
            <p>Example loaded paragraph of text</p>
        </div>
    <a class="box-link" href="#.html">Link 2</a>
    <a class="box-link" href="#.html">Link 3</a>
    <a class="box-link" href="#.html">Link 4</a>
</section>

而这个相关的CSS：

section {
    width: 100%;
    max-width: 60em;
    margin: 0 auto;
}

.box-link {
    display: block;
    box-sizing: border-box;
    padding: 1em;
    width: 100%;
}

在大型浏览器窗口中，截面宽度最大为 60em，并在屏幕上居中。每一点内容都被冲到列的边缘，并且排列得很好。

当浏览器窗口小于 60em 时，所有内容都变为 100% 宽度，这正是我想要的 - 除了p标签。在这种状态下，我希望p标签在左右两侧有一个额外的 1em 边距或填充，以防止它与页面边缘对接。

添加padding: 0 1em;到 section 标记正是我想要的p标记，但其他所有东西也得到了填充，这是我不想要的 - 在一个大的浏览器窗口中，宽度仍然限制在 60em。一旦窗口大小减小到 60em 以下，填充是可见的。

所以，问题是：是否有办法以这种“自动”方式仅为 p标签实现额外的填充/边距，还是我必须求助于使用媒体查询来应用类似p { padding: 0 1em; }较小屏幕的东西？

谢谢你。

4

1 回答 1

0

我认为媒体查询是唯一也是最好的选择-

@media screen and (max-width:480px) {
    p { padding: 0 1em; }
}
于 2013-04-11T21:08:39.843 回答