Bagaimana untuk memastikan ketinggian semua teg <h3> adalah konsisten
P粉121447292
P粉121447292 2023-08-20 11:15:19
0
1
488
<p>Saya mendapat teg h3. salah satu yang lebih rendah Saya cuba menggunakan margin: 0 dan padding tetapi ia tidak berjaya dan saya tidak tahu di mana silap saya. </p> <p>Selepas mengalih keluar align-item: tengah, ketinggian telah ditetapkan, tetapi bagaimana untuk menjadikannya berpusat dalam bekas imej tanpa memusnahkan ketinggian h3 Gambar</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.info-footer { warna latar belakang: rgba(33, 40, 59, 0.8); warna: #fff; sempadan: 1px pepejal rgb(53, 56, 72); lebar: 100%; ketinggian: 14em; paparan: flex; justify-content: pusat; jurang: 200px; padding: 20px 10px; align-item:top; }</pre> <pre class="brush:html;toolbar:false;"><div class="info-footer"> <div class="info-footer-info"> <h3>Menu 1</h3> <ul> <li><a href="#">Mengenai kami</a></li> <li><a href="#">Soalan Lazim</a></li> <li><a href="#">Terma dan Syarat</a></li> <li><a href="#">Dasar Privasi</a></li> </ul> </div> <div class="info-footer-menu"> <h3>Menu 2</h3> <ul> <li><a href="#">Hubungi kami</a></li> </ul> </div> </div></pre> <p><br /></p>
P粉121447292
P粉121447292

membalas semua(1)
P粉903052556

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

Fungsi

align-items ialah:

Pilih center 表示将元素放置在 flex 容器的中心,并围绕此中心进行布局。换句话说,你的 footer-infofooter-menu untuk menyelaraskan dengan tengah bekas flex, bukan kedudukan permulaan.

.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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan