xiao9469 发表于 2026-1-25 15:57:52

控制指定的P标签只在移动端显示，不在PC端显示，但是会占用PC端空间。

控制指定的P标签不在PC端显示，但是会占用PC端排版空间，多出空白部分。    怎么去除这个箭头多出的空白空间。 用了 display: none 为什么还会多出空白空间。



网页上的控制代码是这种：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC端隐藏P标签</title>
   <style>
/* 默认情况下，PC隐藏该 p 标签 */
p.only-mobile {

display: none;

}

/* 当屏幕宽度小于 768px 时（通常为移动端），显示该 p 标签 */
@media (max-width: 768px) {

p.only-mobile {

display: block; /* 或者使用 inline，根据你的需求 */

}

}
    </style>
</head>
<body>
    <p class="only-mobile">这段文字仅在移动端显示，在PC端将被隐藏。</p>
</body>
</html>

独家记忆 发表于 2026-1-25 15:58:10

问一下AI。。

婷姐 发表于 2026-1-25 15:59:00

不知道怎么问，问懂的更快

婷姐 发表于 2026-1-25 15:59:16

2个方案
核心 CSS 方案直接用 CSS 的 display: none 是最彻底的方式：css/* 只在 PC 端生效 */@media (min-width: 768px) {.your-p-class {display: none;}}

备选方案（如果不能用 display: none）
如果因为某些原因不能用 display: none，可以组合使用 height: 0、margin: 0、padding: 0 来彻底消除空间：css@media (min-width: 768px) {.your-p-class {visibility: hidden;height: 0;margin: 0;padding: 0;overflow: hidden;border: none;}}

TyCoding 发表于 2026-1-25 15:59:23

本帖最后由 海尼尔 于 2026-1-24 21:50 编辑

你看我的代码，你的回答无效。display: none我用了的

独家记忆 发表于 2026-1-25 16:00:01

display: none 就可以，不会占用空间，你的代码肯定有问题，要么没生效样式被覆盖了，要么其他地方占用的。

TyCoding 发表于 2026-1-25 16:00:33

问AI吧。。

独家记忆 发表于 2026-1-25 16:01:05

我也觉得问问ai代码还有上面的问题给它就行

独家记忆 发表于 2026-1-25 16:01:39

社区大神多

婷姐 发表于 2026-1-25 16:01:58

社区大神多
页: [1]
查看完整版本: 控制指定的P标签只在移动端显示，不在PC端显示，但是会占用PC端空间。