gpt4 book ai didi

html - Css 中心对齐显示 :flex navbar

转载 作者:行者123 更新时间:2023-11-27 22:56:38 28 4
gpt4 key购买 nike

我如何居中对齐导航栏?

我认为问题出在 display: flex 上。我试过:

display: inline-block;
text-align: center;
justify-content: center;

ul 标签上。这似乎不起作用。有没有办法绕过 display:flex 相关问题?

我将边距和填充设置为 0。另外,是否可以将整个网站的边距设置在 300 像素之间?

源代码:

* {
margin: 0;
padding: 0;
}

body {}

h1 {
font-weight: normal;
font-size: 40px;
font-family: 'Black Han Sans', sans-serif;
}

.menu-1 {
display: inline-block;
text-align: center;
justify-content: center;
}

.menu-1 ul {
width: 800px;
justify-content: center;
display: flex;
list-style-type: none;
background-color: #e9e9e9;
border: 0.5px solid #000000;
}

.menu-1 ul li {
width: 150px;
flex: 1;
border-left: 0.5px solid #000000;
font-size: 14px;
font-family: 'Jua', sans-serif;
}

.menu-1 ul li a {
display: block;
padding: 8px;
text-decoration: none;
color: black;
}

.menu-1 ul li:hover a {
background-color: #ddd;
text-decoration: none;
border-top: 0.5px solid black;
}

.menu-1 ul li:active a {
background-color: black;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html lang='en, ko'>

<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">
<style>

</style>
</head>


<body>
<br>

<div class="headings">
<h1>
<img src="logo_refined2.jpg" alt="Logo_Img" width="80" height="45">
<a href="#" style="text-decoration: none; color:black;">간장공장</a>
</h1>
</div>


<nav class="menu-1">
<ul>
<li style="border-left:0.5px solid #e9e9e9;"><a href="#">커뮤니티</a></li>
<li><a href="#">식단</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">마켓</a></li>
</ul>
</nav>


</body>

</html>

最佳答案

display:flex 很好(不是 inline-block),然后你给 800px width ul ,你可以删除它,因为你还给 li + flex:1; 一个 width (宽度是然后像 min-widthflex:1 告诉它增长以填充 ul)。

下面这似乎是您尝试做的:

* {
margin: 0;
padding: 0;
}

body {}

h1 {
font-weight: normal;
font-size: 40px;
font-family: 'Black Han Sans', sans-serif;
}

.menu-1 {
display:flex;
text-align: center;
justify-content: center;
}

.menu-1 ul {
justify-content: center;
display: flex;
list-style-type: none;
background-color: #e9e9e9;
border: 0.5px solid #000000;
}

.menu-1 ul li {
width: 150px;
flex: 1;
border-left: 0.5px solid #000000;
font-size: 14px;
font-family: 'Jua', sans-serif;
}

.menu-1 ul li a {
display: block;
padding: 8px;
text-decoration: none;
color: black;
}

.menu-1 ul li:hover a {
background-color: #ddd;
text-decoration: none;
border-top: 0.5px solid black;
}

.menu-1 ul li:active a {
background-color: black;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html lang='en, ko'>

<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">
<style>

</style>
</head>


<body>
<br>

<div class="headings">
<h1>
<img src="logo_refined2.jpg" alt="Logo_Img" width="80" height="45">
<a href="#" style="text-decoration: none; color:black;">간장공장</a>
</h1>
</div>


<nav class="menu-1">
<ul>
<li style="border-left:0.5px solid #e9e9e9;"><a href="#">커뮤니티</a></li>
<li><a href="#">식단</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">마켓</a></li>
</ul>
</nav>


</body>

</html>

关于html - Css 中心对齐显示 :flex navbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59225841/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com