การสร้างส่วนท้ายด้วยไอคอนโซเชียลมีเดียและรูปภาพถูกป้อน แต่อันหนึ่งสูงกว่าอีกอันหนึ่งอย่างผิดปกติ ไม่แน่ใจว่าจะแก้ไขได้อย่างไร :( นี่คือรหัส html ของฉัน:

<div class="socials">
              <li><a href="https://www.facebook.com/Geekyourselfout/"><img src="facebook-box-fill.png" alt="Facebook"</a></li>
              <li><a href="https://www.instagram.com/geekyourselfout/"><img src="instagram-fill.png" alt="Instagram"</a></li>
            </div>

และโค้ด CSS ภายนอก:

.socials  {
  Display: flex; 
  Align-items; center;
  Justify-content: center; 
 }
.socials img  {
  Width: 50px;
  Height: 50px;
  }
.socials a  {
  Text-decorations: none;
  }
.socials li {
  List-style-type: none;
  }
.socials a:hover {
  Color: red;
  }

นี่คือภาพของลักษณะที่ปรากฏ rn คำแนะนำและความช่วยเหลือทั้งหมดจะได้รับการชื่นชม ขอบคุณล่วงหน้า :)

ตอบ

อาจเป็นเพราะการพิมพ์ผิดของคุณ "จัดตำแหน่งรายการ;" "รายการ:","text-decoration","text-decoration"

ดูเหมือนว่าอาจมีการพิมพ์ผิดใน css ของคุณ Align-items; center;ควรเป็น: align-items: center;. การตกแต่งข้อความไม่ใช่คุณสมบัติ css มันคือtext-decoration.

ลองดูสิ (FYI โดยทั่วไปแล้วการใช้คุณสมบัติ css เป็นตัวพิมพ์ใหญ่นั้นไม่ใช่เรื่องปกติ ฉันจะเปลี่ยนสิ่งเหล่านั้นทั้งหมดเป็นตัวพิมพ์เล็ก)