Html 锚不绕着李。为什么？

我想要

html

这是scss。上面的css是从scss文件转换而来的

.nav {
    margin: 0;
    padding: 0;
    li {
        list-style-type: none;
        display: inline-block;
        padding: 0.5% 1%;
        border: 1px solid green;
        &.navfirst {
            margin-right: 4%;
        }
        &.navlast {
            margin-left: 4%;
        }
        a {
            display: block;
            text-decoration: none;
            border: 1px solid red;
            width: 100%;
            height: 100%;
        }
    }
}

从
li
标记中删除填充：

...
display: inline-block;
padding: 0.5% 1%;   <-- padding: 0
border: 1px solid green; 
...

从上面的规则中删除
宽度：100%
和
高度：100%
，否则填充将弄乱布局


在上述规则中，百分比单位将不起作用，因为它没有应用百分比的基础宽度/高度。您有3个选项：1）将填充保留在LI中，2）将填充放置在
a
中，使用%以外的单位（
em
非常适合此处），或3）使用媒体查询为每个屏幕大小设置不同的填充。
但我想添加填充。如何添加填充？我将其添加到
a标记
中，但它不起作用。哼，如果您将填充添加到
a
标记中，并将
li
s保留为0，您将获得相同的效果。@al0neevenings为什么要对li进行填充。我想添加背景图像。还有，让我的菜单更像一个矩形。是的，这是可以的，但如果我想使用
百分比
这样的
5%
，该怎么办呢。那么它就不起作用了。我想使用
%
，因为我正在制作一个流畅的布局，可以在包括手机在内的所有屏幕上使用。当a是子元素时，它应该如何环绕li？很难说你到底想要什么。。。
正在包装
标记。那么，当您说希望
标记包装
标记时，您的确切意思是什么？是否希望
标记比
标记大？现在，我给@devundef加了+1，因为这似乎是你想要的。。。
.nav {
    margin: 0;
    padding: 0;
    li {
        list-style-type: none;
        display: inline-block;
        padding: 0.5% 1%;
        border: 1px solid green;
        &.navfirst {
            margin-right: 4%;
        }
        &.navlast {
            margin-left: 4%;
        }
        a {
            display: block;
            text-decoration: none;
            border: 1px solid red;
            width: 100%;
            height: 100%;
        }
    }
}

...
display: inline-block;
padding: 0.5% 1%;   <-- padding: 0
border: 1px solid green; 
...

.header .nav li a {
     display: block;
     text-decoration: none;
     border: 1px solid red;
     padding: 5px; 
}