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调整与其父级的链接，并使用stretch属性的align-items值。在我看来，这是最不实用的方式。

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>

我希望它可以帮到你。

如何在列表项中创建链接占用整个列表项空间？

2 个答案: