如何确保所有<h3>标签的高度一致-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

如何确保所有<h3>标签的高度一致

P粉121447292 2023-08-20 11:15:19

[CSS3讨论组]

952

我得到了h3标签。其中一个较低我尝试使用margin: 0和padding，但它没有起作用，我不知道哪里出错了。

删除align-items: center后，修复了高度，但如何使其在图片容器中居中，而不破坏h3的高度图片

.info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
  align-items:top;
}

<div class="info-footer">
  <div class="info-footer-info">
    <h3>菜单1</h3>
    <ul>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">常见问题</a></li>
      <li><a href="#">条款和条件</a></li>
      <li><a href="#">隐私政策</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>菜单2</h3>
    <ul>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
</div>

P粉121447292

全部回复(1)

P粉9030525562023-08-21 00:57:09 1楼

从 .info-footer 样式中移除 align-items: center;。

align-items 的作用是：

选择 center 表示将元素放置在 flex 容器的中心，并围绕此中心进行布局。换句话说，你的 footer-info 和 footer-menu 与 flex 容器的中心对齐，而不是起始位置。

.info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
}

<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">O nas</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Regulamin</a></li>
      <li><a href="#">Polityka Prywatności</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>