Question

我正在创建一个导航栏并有3个标签，例如（家，约，联系）我希望均匀分布。我想要左和右每个标签的右侧有15％。这应该总计占页面总数的90％，但第三个标签似乎显示在单独的一行下面。

我错过了某处的默认保证金或我做错了什么？我希望尽可能地坚持百分比以适应多种设备。

我找到了身体内部的导航。请参阅下面的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％是合理的，因此包装到下一行。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

作为替代方法，删除所有边距和宽度，然后尝试添加此

nav ul {
    display: flex;
}

这会在页面上均匀分发nav ul个项目。

导体内部的导杆不能均匀分布？

2 个答案: