一种更好的分隔导航栏项目的方法

Question

我试图将这些导航栏项目均匀地隔开，必须有更好的方法来做到这一点，然后只给所有 li 项目一个宽度并希望它们不会溢出。

HTML

  <header>
        <div id="page_wrapper">
        <nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Fun</a></li>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">Utilities</a></li>
    </ul>
    </nav>
    </header>

CSS

 header {
    background-color: #ccc;
}

nav {
    height: 48px;
}

nav ul {
    margin-left: auto;
    margin-right: auto;
}

nav li {
    display: inline-block;
    height: 100%;
    width: 10%;
}

nav li a {
    font-family: cursive;
    color: #ff1e4b;
    font-size: 16px;
    text-decoration: none;
}

nav li a:hover {
    color: #dd5771;
}

小提琴：

https://jsfiddle.net/rkmkxjm0/

原文由 cosmichero2025 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

弹性 怎么样？

把 display: flex; 放在你的 <ul> 上。将 justify-content: space-between; 添加到其中，所有子项将自动展开以占据其父项的整个宽度。请注意，当您更改屏幕尺寸时，它们会适应。

（我还将您的页面宽度设置为 width: 100%; max-width: 1024px; ，这样它就可以成为 1024px ，但在较小的屏幕上只会占据 100%。）

如果您想要在开头和结尾留出一些空间，只需将 justify-content: space-between; 更改为 justify-content: space-around; 即可。

 #page_wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

body {
  margin-bottom: 60px;
}

header {
    background-color: #ccc;
}

nav {
    height: 48px;
}

nav ul {
    padding: 0;
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}
nav li a {
    font-family: cursive;
    color: #ff1e4b;
    font-size: 16px;
    text-decoration: none;

}

nav li a:hover {
    color: #dd5771;
}

 <header>
        <div id="page_wrapper">
		<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Fun</a></li>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">Utilities</a></li>
    </ul>
    </nav>
    </header>

原文由 Tyler Roper 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

是的，确实有。您可以在每个列表项之间添加填充差异，而不是添加固定宽度。

以下是您可以使用 CSS 规则执行的操作的示例：

 nav li {
    display: inline-block;
    height: 100%;
    padding: 10px;
}

您可以在此处查看 JS fiddle 的更新版本： https ://jsfiddle.net/NikolaosG/rkmkxjm0/1/

PS 您原来的 jsfiddle 有一个问题 <div id="page_wrapper"> 。 div 标签在最后没有关闭（在 </header> 之前）

原文由 Nick Gatzouli 发布，翻译遵循 CC BY-SA 3.0 许可协议