Question

我试图将三个链接 - LOGO，关于和常见问题解答显示在同一行，但我无法这样做。似乎我的nav-link课程左边的边距是搞砸了，但我不确定原因。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

Answer 2

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

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>

Answer 3

这是因为您使用百分比保证金。

百分比的保证金总是如此相对于包含块的宽度。

以百分比形式删除左边距。如果你添加固定的保证金，它将起作用。

使用：

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

而不是

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

DEMO： https://jsfiddle.net/hcrcba06/3/

没有排列内联块的链接

3 个答案: