Css 缩放<；a>；在列表中，显示的元素比祖先元素大

你好

首先我必须说：我是一个初学者，所以我希望你对我有耐心！：-）

我通过列表创建了一个导航。通过为“a”添加“padding”，我还确定了它的祖先元素（“ul”和“nav”）的高度。我这样做是因为后来我想让整个区域都变黑

现在，当我想将其缩放到1.2时，“a”点击区域看起来比“ul”和“nav”的祖先区域大

有没有办法把它限制在链接区域的高度

Text

* {
保证金：0；
框大小：边框框；
}
html{
字体大小：100%；
填充：0；
字体系列：helvetica；
}
身体{
颜色：#000；
字号：1em；
文本对齐：左对齐；
填充：0；
背景色：#fff；
}
文章、旁白、详细信息、图表、页脚、页眉、正文、导航、章节、摘要{
显示：块；
}
强壮，b{
字体大小：粗体；
}
嗯，我{
字体样式：*斜体*；
}
小的{
字体大小：0.8rem；
}
主h1，
主p{
边缘底部：1rem；
}
主h1{
字号：2em；
字体大小：*粗体**；
}
主p{
线高：1.5em；
}
梅因：最后一个孩子{
页边距底部：0；
}
导航ul{
列表样式类型：无；
填充：0；
}
标题{
高度：30雷姆；
背景图片：url（../images/whatsapp.jpg）；
背景重复：无重复；
背景尺寸：封面；
背景位置：右下角；
位置：相对位置；
}
标题a{
颜色：白色；
}
/*断点1*/
@介质（最大宽度：1024px）{
标题{
高度：20雷姆；
}
}
标题#标题{
字体大小：7.5rem；
字体大小：*粗体**；
空白：nowrap；
文字装饰：无；
字间距：-0.05em；
位置：绝对位置；
顶部：0.5雷姆；
左：计算（50%-30雷姆）；
不透明度：0.75；
}
/*断点1*/
@介质（最大宽度：1024px）{
标题#标题{
字体大小：5rem；
字体大小：*粗体**；
空白：nowrap；
文字装饰：无；
字间距：-0.05em；
位置：绝对位置；
顶部：0.5雷姆；
左：计算（60%-30雷姆）；
不透明度：0.75；
}
}
标题#标题：：之前{
内容：url（../images/sun.svg）；
显示：内联块；
垂直对齐：中间对齐；
宽度：30%；
字体大小：继承；
页边顶部：1rem；
右边距：2em；
左边距：1 em；
}
/*断点2*/
@介质（最大宽度：768px）{
标题#标题，标题#标题：：之前{
变换：旋转（-90度）；
顶部：calc（30雷姆-100%）；
左-6rem；
}
标题#标题{
字体大小：2.8rem；
}
标题#标题：：之前{
宽度：20%；
保证金权利：0rem；
左边距：2.5雷姆；
边缘底部：1rem；
}
}
导航{
宽度：100%；
背景色：rgba（255、255、255、0.3）；
位置：绝对位置；
顶部：321px；
}
导航ul{
最大宽度：1025px；
显示器：flex；
证明内容：周围的空间；
保证金：自动；
}
李国荣{
字体大小：1.4rem；
字体大小：*粗体**；
空白：nowrap；
}
海军ulli a{
填充：4rem2rem；
文字装饰：无；
显示：块；
文本对齐：居中；
}
导航ulli a：悬停{
背景色：rgba（0,0,0,0.3）；
转换：比例（1.2）；
过渡：背景色0.3s，易于调整；
过渡：0.1s轻松过渡；
填充：4rem2rem；
}
@介质（最大宽度：1024px）{
导航{
框大小：边框框；
宽度：180px；
身高：继承；
位置：未设置；
排名：0；
右：0；
}
导航ul{
宽度：100%；
弯曲方向：立柱；
}
海军ulli a{
填充：1.03rem；
文本对齐：左对齐；
}
}
主要{
最大宽度：1025px；
框大小：边框框；
保证金：自动；
填充：2rem；
}
p{
文本对齐：对齐；
-webkit连字符：自动；
-moz连字符：自动；
连字符：自动；
}
```  
html代码
```
WhatsApp












标题
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。我们的工作是最低限度的，我们的工作是在实验室里进行的
image

CSS and html code

<!-- language: lang-css -->

* {
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    padding: 0;
    font-family: helvetica;
}

body {
    color: #000;
    font-size: 1em;
    text-align: left;
    padding: 0;
    background-color: #fff;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    display: block;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: *italic*;
}

small {
    font-size: 0.8rem;
}

main h1,
main p {
    margin-bottom: 1rem;
}

main h1 {
    font-size: 2em;
    font-weight: **bold**;
}

main p {
    line-height: 1.5em;
}

main :last-child {
    margin-bottom: 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

header {
    height: 30rem;
    background-image: url(../images/whatsapp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
    position: relative;
}

header a {
    color: white;
}

/*Breakpoint 1*/
@media (max-width: 1024px) {
    header {
        height: 20rem;
    }
}

header #title {
    font-size: 7.5rem;
    font-weight: **bold**;
    white-space: nowrap;
    text-decoration: none;

    word-spacing: -0.05em;
    position: absolute;
    top: 0.5rem;
    left: calc(50% - 30rem);
    opacity: 0.75;
}

/*Breakpoint 1*/
@media (max-width: 1024px) {
header #title {
    font-size: 5rem; 
    font-weight: **bold**;
    white-space: nowrap;
    text-decoration: none;

    word-spacing: -0.05em;
    position: absolute;
    top: 0.5rem;
    left: calc(60% - 30rem);
    opacity: 0.75;            
    }
}

header #title::before {
    content: url(../images/sun.svg);
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    font-size: inherit;
    margin-top: 1rem;
    margin-right: 2rem; 
    margin-left: 1rem; 
}

/*Breakpoint 2*/ 
@media (max-width: 768px) {
    header #title, header #title::before {
        transform: rotate(-90deg);
        top: calc(30rem - 100%); 
        left: -6rem; 
    }

    header #title {
        font-size: 2.8rem;
    }
    header #title::before {
        width: 20%;
        margin-right: 0rem;
        margin-left: 2.5rem;
        margin-bottom: 1rem;
    }
}

nav {
    width: 100%; 

    background-color:rgba(255, 255, 255, 0.3);

    position: absolute; 
    top: 321px;
}

nav ul {
    max-width: 1025px;
    
    display: flex;   
    justify-content: space-around; 
    margin: auto; 
}

nav ul li {
    font-size: 1.4rem;
    font-weight: **bold**;
    white-space: nowrap;
}

nav ul li a {
    padding: 4rem 2rem; 
    text-decoration: none;
    display: block; 
    text-align: center;
}

nav ul li a:hover {
    background-color: rgba(0, 0, 0, 0.3);

    transform: scale(1.2);
    transition: background-color 0.3s ease-in;
    transition: transform 0.1s ease-in;

    padding: 4rem 2rem;
}


@media (max-width: 1024px) {
    nav {
        box-sizing: border-box; 
        width: 180px;
        height: inherit;
        position: unset;
        top: 0;
        right: 0;
    
    }

    nav ul {
        width: 100%;
        flex-direction: column;

    }

    nav ul li a {
        padding: 1.03rem; 
        text-align: left;  
    }
}

main {
    max-width: 1025px;
    box-sizing: border-box;
    margin: auto;
    padding: 2rem;
}

p {
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

```  
html code
```

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
            <title>Whatsapp</title>
            <link href="styles/styles_neu.css" rel="stylesheet" media="screen" />
        </head>
        <body>
        
            <header>
                <a href="#" id="title">Whatsapp</a>
                
                <nav>
                    <ul>
                        <li>
                            <a href="#">1</a>
                        </li>
                        
                        <li>
                            <a href="#">2</a>
                        </li>
                        
                        <li>
                            <a href="#">3</a>
                        </li>
                        
                        <li>
                            <a href="#">4</a>
                        </li>
                        
                        <li>
                            <a href="#">5</a>
                        </li>
                    </ul>
                </nav>
            </header>
            
            <main>
            
                <h1>Heading</h1>
                
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            
            </main>
        
        </body>
    </html>

<!-- end snippet -->