我有導(dǎo)航欄：?nav?我讀了很多有關(guān)定位 3 個(gè) div 元素的左中中心的文章，我喜歡這種方式，但它有點(diǎn)不完美，我不知道為什么：? ? <div class="topnav">? ? ? ? ? ? ?<div class="topnav-left">? ? ? ? ? ? ? ? ?<a href="/">Home</a>? ? ? ? ? ? ?</div>? ? ? ? ? ? ?<div class="topnav-center">? ? ? ? ? ? ? ? ?<a href="/about-me">Logo</a>? ? ? ? ? ? ?</div>? ? ? ? ? ? ?<div class="topnav-right">? ? ? ? ? ? ? ? ?<a href="/login">Login</a>? ? ? ? ? ? ?</div>? ? ?</div>樣式.css.topnav{? ? text-align: center;}.topnav-left{? ? float:left;}.topnav-right{? ? float:right;}.topnav-center{? ? display: inline-block;}問題是，當(dāng)我重定向到僅包含主頁和徽標(biāo)的同一頁面（因此沒有右側(cè)部分）時(shí)，徽標(biāo)會(huì)向右移動(dòng)一點(diǎn)，就像它依賴于右側(cè)部分的存在一樣。有人可以解釋一下為什么嗎？
1 回答
慕虎7371278
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用 CSS flexbox 輕松解決這個(gè)問題。
將此 CSS 添加到.topnav：
? ? ? display: flex;
? ? ? flex-flow: row wrap;
? ? ? justify-content: space-between;
它在做什么？它確保容器的子級(jí)（在本例中為內(nèi)部的三個(gè) div）之間的剩余空間均勻分布。
一個(gè)小旁注，用于float定位元素不再被認(rèn)為是最佳實(shí)踐。
.topnav {
? display: flex;
? flex-flow: row wrap;
? justify-content: space-between;
??
? /* Styling */
? background: #eee;
? color: #fff;
? padding: 5px 0;
}
/* Styling */
body {
? margin: 0;
? padding: 0;
}
<div class="topnav">
? <div class="topnav-left">
? ? <a href="/">Home</a>
? </div>
? <div class="topnav-center">
? ? <a href="/about-me">Logo</a>
? </div>
? <div class="topnav-right">
? ? <a href="/login">Login</a>
? </div>
</div>
使用左側(cè)和中心元素編輯解決 方案，只需將div右側(cè)部分留空即可。請(qǐng)參閱下面的代碼片段了解結(jié)果。
.topnav {
? display: flex;
? flex-flow: row wrap;
? /* Styling */
? background: #eee;
? color: #fff;
? padding: 5px 0;
}
.topnav-left,
.topnav-right {
? flex: 1;
}
/* Styling */
body {
? margin: 0;
? padding: 0;
}
<div class="topnav">
? <div class="topnav-left">
? ? <a href="/">Home</a>
? </div>
? <div class="topnav-center">
? ? <a href="/about-me">Logo</a>
? </div>
? <div class="topnav-right">
? </div>
</div>
- 1 回答
- 0 關(guān)注
- 226 瀏覽
添加回答
舉報(bào)
0/150
提交
取消