列表中缩放的<a>看起来大于祖先元素

编程问答 2022-06-04

问题描述

Text

你好，

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

我通过列表创建了一个导航。通过为“ a”添加“ padding”，我还确定了其祖先元素（“ ul”和“ nav”）的高度。我这样做是因为之后我希望整个区域在过渡时变黑。

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

有什么想法可以将其限制为链接区域的高度吗？

image

Link to picture of Problem 

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,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.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,sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            
            </main>
        
        </body>
    </html>

<!-- end snippet -->

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）