html - 如何使列表项内的链接占用整个列表项空间？

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

我已经编写了这段小代码来向您展示我将如何做到这一点。

<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>

希望对你有帮助。