body 内的导航栏未使用百分比均匀分布？

Question

我正在创建一个导航栏并有 3 个选项卡，例如（主页、关于、联系人）我希望均匀分布。我希望每个选项卡的左侧和右侧有 15%。这应该加起来总共占页面的 90%，但是第三个选项卡似乎出现在单独一行的下方。

我是不是在某处遗漏了默认保证金或者我做错了什么？我想尽可能地坚持百分比以适应多种设备。

我已将导航定位在 body 内。请参阅下面的CSS：

body {
background-color: pink;
}

h1 {
text-align: center;
margin-bottom: 4.5%;
color: #fff;
font-family: Florence, cursive;
text-shadow: 2px  0 black;
}

nav ul {
list-style: none;
}

nav li {
display: inline-block;
margin-left: 15%;
margin-right: 15%;
}

Answer 1

默认情况下，元素有 width: auto。在 case of inline-blocks 中，这将是内容的宽度（除非它大于可用宽度）。

因此，除非您的元素为空，否则它们最终总和超过 100% 并因此换行到下一行是合理的。

div {
  display: inline-block;
  margin-left: 15%;
  margin-right: 15%;
}

<div>a</div><div>b</div><div>c</div>
<hr />
<div>aaaaaaaaaaa</div><div>bbbbbbbbbbbb</div><div>ccccccccccc</div>

您应该做的是指定 width 或 max-width。由于单独的边距总和为 90%，剩下的 10% 将是 width: calc(10%/3).

div {
  display: inline-block;
  margin-left: 15%;
  margin-right: 15%;
  width: calc(10%/3);
}

<div>a</div><div>b</div><div>c</div>
<hr />
<div>aaaaaaaaaaa</div><div>bbbbbbbbbbbb</div><div>ccccccccccc</div>

请注意可能会有一些额外的空格，请参阅 How to remove the space between inline-block elements?

Answer 2

作为替代方案，删除所有边距和宽度并尝试添加这个

nav ul {
    display: flex;
}

这将在页面上均匀分布 nav ul 项。

body 内的导航栏未使用百分比均匀分布？

Nav bar inside body not spreading evenly using percentage?

html

css

nav