我有導航欄：?nav?我讀了很多有關定位 3 個 div 元素的左中中心的文章，我喜歡這種方式，但它有點不完美，我不知道為什么：? ? <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;}問題是，當我重定向到僅包含主頁和徽標的同一頁面（因此沒有右側部分）時，徽標會向右移動一點，就像它依賴于右側部分的存在一樣。有人可以解釋一下為什么嗎？
1 回答
慕虎7371278
TA貢獻1802條經驗 獲得超4個贊
您可以使用 CSS flexbox 輕松解決這個問題。
將此 CSS 添加到.topnav：
? ? ? display: flex;
? ? ? flex-flow: row wrap;
? ? ? justify-content: space-between;
它在做什么？它確保容器的子級（在本例中為內部的三個 div）之間的剩余空間均勻分布。
一個小旁注，用于float定位元素不再被認為是最佳實踐。
.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>
使用左側和中心元素編輯解決 方案，只需將div右側部分留空即可。請參閱下面的代碼片段了解結果。
.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 關注
- 185 瀏覽
添加回答
舉報
0/150
提交
取消