英文:
Is there some way to make this flex box (and the items inside) centered?
问题
试着检查一下 li 元素是否有默认的内外边距，可能会导致额外的间距。
英文:
I am attempting to make the nav bar. For some reason, there is some padding (as noted by chrome's inspect (or so I think?)) But I can't seem to find it in the css file, any tips? I may be doing the flex boxes wrong, but maybe something else.
screen shot of the website (hosted locally)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.header-nav {
background-color: #E1D7C6;
display: inline-flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
font-size: 20px;
}
nav {
font-size: 15px;
display: flex;
justify-content: center;
}
li {
display: block;
background-color: #D5BDAF;
text-decoration: none;
}
<!-- language: lang-html -->
<nav>
<ul class="header-nav">
<li><a href="about.html">About</a></li>
<li><a href="what-we-do.html">What We Do</a></li>
<li><a href="get-involved.html">Get Involved</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="get-help.html">Get Help</a></li>
</ul>
</nav>
<!-- end snippet -->
I tried to remove the other padding, spaces, and other text to see if something was causing it there. Any help/advice is appreciated! Thanks for the help!
答案1
得分: 0
你可以将 padding 设置为 0，以去掉 .header-nav 的右边 40px 的填充。
还应该使用 space-around，而不是 between，在导航栏的开头和结尾创建一些空间，并在 flex 项之间添加一个间隙（我使用了 10px）。
.header-nav {
width: 500px;
background-color: #E1D7C6;
display: flex;
padding: 0;
gap: 10px;
justify-content: space-around;
align-items: center;
text-decoration: none;
font-size: 20px;
}
nav {
font-size: 15px;
display: flex;
justify-content: center;
}
li {
display: block;
background-color: #D5BDAF;
text-decoration: none;
}
<nav>
<ul class="header-nav">
<li><a href="about.html">About</a></li>
<li><a href="what-we-do.html">What We Do</a></li>
<li><a href="get-involved.html">Get Involved</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="get-help.html">Get Help</a></li>
</ul>
</nav>
英文:
You can set your padding to 0, to get rid the 40px right-padding of .header-nav.
You should also use space-around, not between to create a little space in the start and the end of the navbar, and add a gap(i used 10px) betweet the flex items
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.header-nav {
width: 500px;
background-color: #E1D7C6;
display: flex;
padding: 0;
gap: 10px;
justify-content: space-around;
align-items: center;
text-decoration: none;
font-size: 20px;
}
nav {
font-size: 15px;
display: flex;
justify-content: center;
}
li {
display: block;
background-color: #D5BDAF;
text-decoration: none;
}
<!-- language: lang-html -->
<nav>
<ul class="header-nav">
<li><a href="about.html">About</a></li>
<li><a href="what-we-do.html">What We Do</a></li>
<li><a href="get-involved.html">Get Involved</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="get-help.html">Get Help</a></li>
</ul>
</nav>
<!-- end snippet -->
Hope that helps
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论