如何在列表項目內建立一個鏈接取整個列表項目空間？

Question

有沒有辦法讓列表中的鏈接總是佔用列表項的寬度和高度的100％，而不管屏幕大小如何？

.navList { 
    list-style-type: none; 
    overflow: hidden; 
} 

.navListItem { 
    float: left; 
} 

.navListLink:link, .navListLink:visited { 
    color: #000000; 
    text-decoration: none; 
    font-size: 100%; 
    display: block; 
    padding: 1em; 
} 

Answer 1

您可以使用Flex調整你的鏈接到它的父與align-items屬性的stretch值。在我看來，這是最簡單的方法。

Answer 2

我已經寫了這個小代碼，告訴你我該怎麼做。

<style> 
    ul{ 
     background-color: orange; 
     width: 78%; 
     height: 8rem; 

     /* Centered on Viewport*/ 
     position: absolute; 
     top: 0; left: 0; right: 0; bottom: 0; 
     margin: auto; 

     padding: 1rem; 
    } 
    li{    
     outline: thin solid white; 
     list-style: none; 
     font: 1.2rem/2rem Serif; 
    } 
    a{ 
     box-sizing: border-box; 
     background-color: #444; 
     display: inline-block; 
     width: 100%; 
     padding: 0 1rem; 
     color: white;   
    } 
    a:link{ 
     text-decoration: none; 
    } 
</style> 

<ul> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">item 2</a></li> 
    <li><a href="#">item 3</a></li> 
    <li><a href="#">item 4</a></li> 
</ul> 

我希望它可以幫助你。