鏈接沒有與內聯塊排隊

我試圖讓三個鏈接 - LOGO，關於和常見問題在同一行顯示，但我無法這樣做。看起來，我的nav-link課程上留下的餘地正在搞砸了，但我不知道爲什麼。鏈接沒有與內聯塊排隊

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/

來源

2015-04-12 user2635088

只取利潤率左出，它工作正常。或將其更改爲更適合的東西（px，em） – ElefantPhace

[爲什麼邊緣/填充百分比總是按照寬度計算？]（http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages -in-css-always-calculated-against-width） – Stickers

這是因爲您使用的百分比保證金。

相對於包含塊的寬度，百分比邊距始終爲。

刪除百分比的餘裕。如果你添加一個固定的邊距，它將起作用。

用途：用於

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

代替

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

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

來源

2015-04-12 18:52:50

您可以將保證金設置爲固定值，但不以百分比表示。試試:) –

背後的原因是什麼？ – user2635088

'margin-top'和'margin-bottom'的百分比邊距與包含塊的寬度有關，而不是高度和垂直流，'margin-left'和'margin-right'是相對於高度，而不是寬度。 –

包含您的鏈接，這樣就帶來了最後一個到下一個沒有太多空間來放置在同一行的鏈接div只需增加nav-partclass的width即可使用。 JSFiddle here

來源

2015-04-12 18:48:18 Muhammad

您就可以輕鬆解決，改成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>

來源

2015-04-12 19:00:13 Stickers

鏈接沒有與內聯塊排隊

回答

相關問題