項(xiàng)目場景：

css樣式布局

例如：項(xiàng)目場景：頁面頂部導(dǎo)航欄，左側(cè)logo、右側(cè)退出登錄固定在頁面，不隨滾動(dòng)條滾動(dòng)；中間有菜單，添加滾動(dòng)條。

---

問題描述

頂部導(dǎo)航欄出現(xiàn)滾動(dòng)條，滾動(dòng)條位置在頁面底部

解決方案：

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

父元素進(jìn)行flex布局，overflow:hidden

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

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

.header {overflow: hidden;height: 60px !important;padding: 0;display: flex; //設(shè)置顯示為flex布局justify-content: space-between; //設(shè)置為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; //定最小寬度，菜單欄會(huì)出現(xiàn)滾動(dòng)條}.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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。