我希望导航栏中的项目均匀水平.# # HTML CSS



.navbar__logo {
background-color: #770ef7;
}
.navbar-inner {
background-color: #111;
position: relative;
display: flex;
flex: 1;
padding: 0;
text-decoration: none;
justify-content: space-between
}
.navbar__logo svg {
display: block;
justify-content: center;
align-items: center;
width: 80px;
height: auto;
fill: white;
}
.navbar {
display: flex;
height: 73px;
text-decoration: none;
}
.navbar__menu {
display: flex;
list-style: none;
justify-content:space-around
}
새소식, 뉴비가이드, 다운로드, 게임가이드, 헬프데스크.
I want to arrange these items evenly horizontally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Document</title>
</head>
<body>
<div id="app">
<nav class="navbar">
<div class="navbar-inner">
<div class="navbar__logo">
<a href="/" aria-current="page" class="navbar-logo router-link-exact-active router-link-active" draggable="false">
<svg xmlns="http://www.w3.org/2000/svg" width="370" height="326" viewBox="0 0 370.4 326.3">
<path d="M53.8 3.6c-20.8 0-36.4 0-51.9 0 0-1 0-2 0.1-2.9 37.6 0 75.3 0 112.9 0 0 0.9 0 1.8 0.1 2.8 -9.2 0-18.5 0-30.3 0 0 7.7 0 13.8 0 19.9 0 79.6 0.3 159.2-0.1 238.8C84.3 310.2 48.5 336.6 0 322.6c8-1.1 13.6-1.8 20.8-2.8 0.3-5.2 0.8-10.2 0.8-15.3 0-75.9 0-151.8-0.2-227.7C21.3 49.7 27.2 25.2 53.8 3.6z"></path>
<path d="M191.2 88.6c-5.4 9.3-9.1 16-12.9 22.6 -1.1-0.5-2.3-1-3.4-1.5C188.8 74.7 202.6 39.9 218.5 0c44.3 109.8 87 215.3 130 321.7 7.4 0.5 14.6 1 21.9 1.5 0 0.7 0 1.4 0 2.1 -37.6 0-75.2 0-112.8 0 -0.1-0.6-0.1-1.2-0.2-1.8 7.9-0.5 15.8-0.9 26.1-1.5C252.7 244.3 222.5 167.7 191.2 88.6z"></path>
<path d="M65.9 322c22.8-9.5 28.5-27.9 35.5-45.7 7.3-18.6 13.7-38 23.8-55.1 16.9-28.8 48.4-39.1 83.4-28.6 -22.1 11.1-27.9 31.5-34.5 51.5 -3.6 11.1-7.5 22-12.1 32.7C144.8 317.5 114 332.8 65.9 322z"></path>
<path d="M221.5 238.5c0 31.7 0 58.1 0 85.9 -29.3 0-58.1 0-91.4 0C171.5 306.5 199.2 278 221.5 238.5z"></path>
</svg>
</a>
</div>
<ul class="navbar__menu">
<li><a href="">새 소식</a></li>
<li><a href="">다운로드</a></li>
<li><a href="">게임 가이드</a></li>
<li><a href="">갤러리</a></li>
<li><a href="">헬프데스크</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

我希望导航栏中的项目均匀水平。我认为我仍然缺乏对ailgnits的理解和对内容的正当性。如果你能给我这个韩语初学者一些建议,我会很感激的。大家要小心COVID-19。

你很接近了。

所有你需要的是添加justify-content: space-evenly;到你的.navbar-menu,然后给它一个flex-basis: 100%,因为你已经有display: flex了。

为了使菜单项更接近徽标,您只需要记住,您的ul从用户代理样式表中获得了40px的左侧填充。我从ul中删除了填充,这些项目之间不再有大的空间。

作为一个装饰性的改变(也是为了我自己的强迫症),我将align-items: center添加到菜单项中,使它们在nav中垂直对齐。

此外,您忘记了关闭nav标记,因此可能会导致问题。

.navbar__logo {
background-color: #770ef7;
}
.navbar-inner {
background-color: #111;
position: relative;
display: flex;
flex: 1;
padding: 0;
text-decoration: none;
justify-content: space-between
}
.navbar__logo svg {
display: block;
justify-content: center;
align-items: center;
width: 80px;
height: auto;
fill: white;
}
.navbar {
display: flex;
height: 73px;
text-decoration: none;
}
.navbar__menu {
padding: 0;
display: flex;
list-style: none;
justify-content: space-evenly;
align-items: center;
flex-basis: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Document</title>
</head>
<body>
<div id="app">
<nav class="navbar">
<div class="navbar-inner">
<div class="navbar__logo">
<a href="/" aria-current="page" class="navbar-logo router-link-exact-active router-link-active" draggable="false">
<svg xmlns="http://www.w3.org/2000/svg" width="370" height="326" viewBox="0 0 370.4 326.3">
<path d="M53.8 3.6c-20.8 0-36.4 0-51.9 0 0-1 0-2 0.1-2.9 37.6 0 75.3 0 112.9 0 0 0.9 0 1.8 0.1 2.8 -9.2 0-18.5 0-30.3 0 0 7.7 0 13.8 0 19.9 0 79.6 0.3 159.2-0.1 238.8C84.3 310.2 48.5 336.6 0 322.6c8-1.1 13.6-1.8 20.8-2.8 0.3-5.2 0.8-10.2 0.8-15.3 0-75.9 0-151.8-0.2-227.7C21.3 49.7 27.2 25.2 53.8 3.6z"></path>
<path d="M191.2 88.6c-5.4 9.3-9.1 16-12.9 22.6 -1.1-0.5-2.3-1-3.4-1.5C188.8 74.7 202.6 39.9 218.5 0c44.3 109.8 87 215.3 130 321.7 7.4 0.5 14.6 1 21.9 1.5 0 0.7 0 1.4 0 2.1 -37.6 0-75.2 0-112.8 0 -0.1-0.6-0.1-1.2-0.2-1.8 7.9-0.5 15.8-0.9 26.1-1.5C252.7 244.3 222.5 167.7 191.2 88.6z"></path>
<path d="M65.9 322c22.8-9.5 28.5-27.9 35.5-45.7 7.3-18.6 13.7-38 23.8-55.1 16.9-28.8 48.4-39.1 83.4-28.6 -22.1 11.1-27.9 31.5-34.5 51.5 -3.6 11.1-7.5 22-12.1 32.7C144.8 317.5 114 332.8 65.9 322z"></path>
<path d="M221.5 238.5c0 31.7 0 58.1 0 85.9 -29.3 0-58.1 0-91.4 0C171.5 306.5 199.2 278 221.5 238.5z"></path>
</svg>
</a>
</div>
<ul class="navbar__menu">
<li><a href="">새 소식</a></li>
<li><a href="">다운로드</a></li>
<li><a href="">게임 가이드</a></li>
<li><a href="">갤러리</a></li>
<li><a href="">헬프데스크</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>

最新更新