項目場景：

css樣式布局

例如：項目場景：頁面頂部導航欄，左側logo、右側退出登錄固定在頁面，不隨滾動條滾動；中間有菜單，添加滾動條。

---

問題描述

頂部導航欄出現滾動條，滾動條位置在頁面底部

解決方案：

提示：這里填寫該問題的具體解決方案：

父元素進行flex布局，overflow:hidden

左元素420px;右元素80px，position:absolute

中間元素使用寬度計算 width: calc(100% - 500px);

.header {overflow: hidden;height: 60px !important;padding: 0;display: flex; //設置顯示為flex布局justify-content: space-between; //設置為flex左右布局align-items: center; //元素上下居中（防止右邊按鈕貼上下邊）.logo {display: flex;justify-content: space-between;align-items: center;img {width: 420px;height: 44px;transform: rotate(0deg);}}.top-menu {width: calc(100% - 500px);min-width: 300px; //定最小寬度，菜單欄會出現滾動條}.layout {width: 80px;position: absolute;right: 8px;} }<template><div class="h-100 top-menu"><el-scrollbar wrap-class="el-scrollbar__wrap"><el-menu mode="horizontal" :default-active="activeRouter" router></el-menu></el-scrollbar></div></template>

總結

以上是生活随笔為你收集整理的页面顶部导航栏css样式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。