탐색 모음을 만들지 만 링크 위로 마우스를 가져갈 때마다 ul과 a : hover 사이에이 간격이 있습니다. 나는 간격을 제거하고 호버가 전체 영역을 덮도록 만드는 방법을 알아 내려고 노력하고 있습니다.
나는 ul에 대한 패딩을 제거하려고 시도했지만 호버는 컨테이너를 부수고 ul을 더 작게 만듭니다. Google 크롬에서 검사 도구를 사용해 보았습니다. 그것은 ul의 패딩이 1rem이고 a가 1rem이라는 것을 보여 주지만 그 간격이 어디에서 오는지 이해할 수 없습니다. 패딩을 포함하도록 범용 선택기를 설정하고 여백을 0으로 설정했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<title></title>
<style>
:root{
--max-width: 1100px;
--dark-color: #333;
--light-color: #f3f3f3;
--primary-color: #93cb52;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Karla', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
a{
color: black;
text-decoration: none;
}
ul {
list-style: none;
}
img {
width:100%;
}
/*Utility*/
.container {
max-width: var(--max-width);
margin:auto;
padding: 0 2rem;
overflor:hidden;
}
,btn {
display: inline-block;
border: none;
background: var(--dark-color);
color: #fff;
padding: 0.5rem 1.5rem;
}
.bg-dark {
background: var(--dark-color);
}
/*Main-nav*/
#main-nav .container{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
#main-nav .container h1 {
flex:2;
}
#main-nav ul{
display: flex;
justify-content:center;
align-items: center;
padding:1rem;
background: white;
}
#main-nav ul li a {
flex:1;
padding:1rem;
color: black;
}
#main-nav ul li a:hover{
background: #333;
color: #fff;
}
</style>
</head>
<body>
<nav id="main-nav" class="bg-dark">
<div class="container">
<h1 class="header-logo">Experience</h1>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
틈이있는 이유와 제거 방법을 알고 싶습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다