จะตั้งค่า a: link height / width ด้วย css ได้อย่างไร?

ฉันไม่สามารถกำหนดความสูงและความกว้างของaองค์ประกอบของการนำทางได้

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

มีความคิดอะไรที่ฉันทำผิด?

เพิ่มการแสดง: บล็อก;

a-tag เป็นองค์ประกอบแบบอินไลน์ดังนั้นความสูงและความกว้างของคุณจึงถูกละเว้น

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

จุดยึดจะต้องเป็นประเภทการแสดงผลที่แตกต่างจากค่าเริ่มต้นเพื่อรับความสูง display:inline-block;หรือdisplay:block;.

ตรวจสอบline-heightสิ่งที่อาจน่าสนใจด้วย

ปัญหาของคุณน่าจะเป็นที่ aองค์ประกอบdisplay: inlineโดยธรรมชาติ คุณไม่สามารถกำหนดความกว้างและความสูงขององค์ประกอบแบบอินไลน์ได้

คุณจะต้องตั้งค่าdisplay: blockบนaแต่จะนำมาซึ่งปัญหาอื่น ๆ เนื่องจากลิงก์เริ่มทำงานเหมือนองค์ประกอบบล็อก วิธีการรักษาที่พบบ่อยที่สุดคือให้พวกfloat: leftเขาเข้าแถวเคียงข้างกัน

จากคำจำกัดความของความสูง :

นำไปใช้กับองค์ประกอบทั้งหมดยกเว้นองค์ประกอบแบบอินไลน์คอลัมน์ตารางและกลุ่มคอลัมน์ที่ไม่ถูกแทนที่

aองค์ประกอบโดยค่าเริ่มต้นองค์ประกอบแบบอินไลน์ (และก็ไม่สามารถแทนที่)

คุณจำเป็นต้องเปลี่ยนการแสดงผล (โดยตรงกับคุณสมบัติการแสดงผลหรือทางอ้อมเช่นแบบลอย)

ขอบคุณ RandomUs 1r สำหรับการสังเกตนี้:

เปลี่ยนเป็น display: inline-block; แก้ปัญหานั้น - RandomUs1r 14 พ.ค. 56 เวลา 21:59 น

ฉันลองใช้แถบเมนูการนำทางด้านบนด้วยตัวเองดังนี้:

ขั้นแรกจัดรูปแบบองค์ประกอบ "li" ดังนี้:

แสดง: อินไลน์บล็อก;
ความกว้าง: 7em;
จัดข้อความ: ศูนย์;

จากนั้นจัดรูปแบบองค์ประกอบ "a"> ดังนี้:

ความกว้าง: 100%;

ตอนนี้ลิงก์การนำทางมีความกว้างเท่ากันทั้งหมดโดยมีข้อความอยู่ตรงกลางในแต่ละลิงก์