リストアイテム内のリンクを作成するにはどのようにリストアイテム空間全体を取るのですか？

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

あなたは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> 

私はそれがあなたを助けてくれることを願っています。