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;
}

JSFIDDLE：

https://jsfiddle.net/rkmkxjm0/

Answer 1

flex怎么样？

将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>

Answer 2

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

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

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

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

P.S。您的原始jsfiddle与<div id="page_wrapper">存在问题。 div标签最后没有关闭（</header>之前）

Answer 3

如果您不太关心向后兼容性，则应考虑使用大多数现代浏览器支持的Flexbox布局，包括Firefox，Chrome，Safari，Edge以及IE11。（见CanIUse.com/flexbox。）

使用flexbox的布局很简单;只需删除ul和li的现有CSS规则，然后执行以下操作：

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;    
}

nav li {
    margin: 0;
    padding: 0;
    display: block;
}

使用flexbox可以轻松完成各种其他布局;你可以在这里看到所有选项，例如：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

如果你可以使用外部图书馆 - Bootstrap有navbar-justified类就能为你做到这一点

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

4 个答案: