搜索

首页  >  问答  >  正文

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

<p>我得到了h3标签。其中一个较低 我尝试使用margin: 0和padding,但它没有起作用,我不知道哪里出错了。</p> <p>删除align-items: center后,修复了高度,但如何使其在图片容器中居中,而不破坏h3的高度 图片</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.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; }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p>
P粉121447292P粉121447292451 天前480

全部回复(1)我来回复

  • P粉903052556

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

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

    align-items 的作用是:

    选择 center 表示将元素放置在 flex 容器的中心,并围绕此中心进行布局。换句话说,你的 footer-infofooter-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
  • 取消回复