如何解决列表中缩放的<a>看起来大于祖先元素
Text
你好，
首先我要说：我是一个初学者，所以我希望你对我耐心！：-）
我通过列表创建了一个导航。通过为“ a”添加“ padding”，我还确定了其祖先元素（“ ul”和“ nav”）的高度。我这样做是因为之后我希望整个区域在过渡时变黑。
现在，当我要将其缩放到1.2时，“ a”单击区域看起来要比“ ul”和“ nav”的祖先区域大。
有什么想法可以将其限制为链接区域的高度吗？
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,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 举报，一经查实，本站将立刻删除。
