链接未与内联块对齐

Question

我试图让三个链接 - 徽标、关于和常见问题解答显示在同一行上，但我做不到。似乎我的 nav-link class 上的 margin-left 把事情搞砸了，但我不确定为什么。

body, html {
    background-color: #EDEDED;
}
.nav {
    position: absolute;
    width: 80%;
    margin: 5%;
}
.nav-link {
    margin-left: 2%;
}
.nav-part {
    display: inline-block;
}
.apply {
    float: right;
    position: relative;
    right: 0;
    top: 0;
}

<div class="nav">
    <div class="nav-part">
        <a href="/" class="brand-logo">LOGO</a>
        <a href="/about" class="nav-link">About</a>
        <a href="/faq" class="nav-link">FAQ</a>
    </div>
    <div class="apply nav-part">
        <button>Apply</button>
    </div>
</div>

这是我的 jsfiddle - https://jsfiddle.net/hcrcba06/1/

Answer 1

包含您的链接的 div 没有太多空间将链接放在同一行，因此它将最后一个链接带到下一行，只需增加 [=] 的 width 12=] class 它将起作用。 JSFiddle here

Answer 2

这是因为您使用的是百分比形式的边距。

Margins in percentages are always relative to the width of the containing block.

以百分比形式移除边距。如果您添加固定边距，它将起作用。

使用：

.nav-link {
  margin-left: 12px;
}

而不是

.nav-link {
  margin-left: 2%;
}

演示： https://jsfiddle.net/hcrcba06/3/

Answer 3

您可以通过将其更改为 CSS table 布局轻松解决该问题。

body, html {
    background: #EDEDED;
}
.nav {
    display: table;
    width: 80%;
    margin: 5% auto;
}
.nav-part {
    display: table-cell;
}
.nav-link {
    margin-left: 2%;
}
.apply {
    text-align: right;
}

<div class="nav">
    <div class="nav-part">
        <a href="/" class="brand-logo">LOGO</a>
        <a href="/about" class="nav-link">About</a>
        <a href="/faq" class="nav-link">FAQ</a>
    </div>
    <div class="apply nav-part">
        <button>Apply</button>
    </div>
</div>

链接未与内联块对齐

Links not lining up with inline-block

css

margin