求助:实现MAIN与NAV元素并排,MAIN内容置于导航栏右侧
下面是调整后的代码,解决你的布局问题:
修改后的CSS
*, html, body { margin: 0; padding: 0; } main { display: flex; overflow: hidden; /* 避开左侧固定导航的宽度,占据剩余空间 */ margin-left: 12.5%; width: calc(100% - 12.5%); /* 让内容靠右对齐 */ justify-content: flex-end; /* 可选:添加内边距避免内容贴边 */ padding: 20px; box-sizing: border-box; } .right { display: inline-block; width: 87.5%; } /* NAVBAR */ .navbar__left { position: fixed; } nav { display: inline-block; font-weight: lighter; font-family: 'Barlow', sans-serif; background-color: #fff; width: 12.5%; height: 100vh; font-size: 15px; text-align: center; border-right: 1px solid #131313; /* 移除重复的position: fixed,父元素已设置 */ } nav .title { height: 10%; } nav .title img { margin: 15px 0 15px 0; height: 50px; width: auto; } nav .links { margin: 50% 0 50% 0; } nav .links ul { list-style-type: none; } nav .links ul li { margin: 25px 0; } nav .links ul li a { text-decoration: none; color: black; } nav .copyright { padding-top: 50px; height: 20%; }
修改后的HTML
<nav class="navbar__left"> <div class="title"> <a href="">LOGO</a> </div> <div class="links"> <ul> <li><a href="uzitocne-odkazy.php">UŽITOČNÉ ODKAZY</a></li> <li><a href="kontakt.php">KONTAKT</a></li> </ul> </div> <div class="copyright"> <b>NIEKTO </b>© 2022 </div> </nav> <main>test</main>
关键修改说明
- 给
main设置margin-left: 12.5%:左侧导航是固定定位(fixed),不会占据文档流空间,设置左外边距可避开导航宽度,防止内容被遮挡。 - 给
main设置width: calc(100% - 12.5%):让main占据导航之外的剩余宽度,实现并排布局。 - 添加
justify-content: flex-end到main:利用flex布局特性,让内部的"test"文本靠右对齐;若不需要flex,也可将display: flex改为display: block,用text-align: right实现居右。 - 移除
nav上重复的position: fixed:父元素.navbar__left已设置固定定位,子元素会继承该属性,重复设置属于冗余代码。
内容的提问来源于stack exchange,提问作者furtake
相关产品推荐
相关产品推荐

