<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>
从
.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>