页面右侧的导航栏
[英]Navigation bar to the right side of the page
问题描述
I am designing a web page.
我正在设计一个 web 页面。 I have already created the navigation bar but the problem is that I want it on the right side of the page.我已经创建了导航栏，但问题是我希望它在页面的右侧。 I have tried using float: right but it does not work.我试过使用float: right ，但它不起作用。 It works perfectly when scrolling the page as it moves to stay in place, but I have not been able to send it to the right side of the page, like for two days.它在滚动页面时完美运行，因为它移动以保持原位，但我无法将它发送到页面的右侧，比如两天。
Thank you in advance.先感谢您。
Here is my HTML, I am skipping the Hero Section as it is another div.这是我的 HTML，我跳过了英雄部分，因为它是另一个 div。
.sideNav { height: 100%; width: 0; background-color: red; position: fixed; z-index: 1;important: bottom. 4;5vh: left; 0: background-color; #fff: padding-top; 60px: float; right. }:sideNav__button { padding; 8px 8px 24px 32px: text-decoration; none: color; white; }
<body> <.-- Navegation bar --> <nav class="sideNav d-flex flex-column"> <.-- Navegation icons --> <a class="sideNav__button" href="#"><img class="navIcon" src="./res/icons/inicio_off.png" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="./res/icons/lulu_off.png" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="./res/icons/menu_off.png" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="./res/icons/about_off.png" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="./res/icons/reserva_off.png" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="./res/icons/contacto_off.png" alt=""></a> </nav>
2 个解决方案
解决方案1
2 2021-12-06 03:55:30
you can try this ( right:0; and remove left:0; ):你可以试试这个（ right:0;并删除left:0; ）：
.sideNav {
height: 100%;
width: 0;
background-color: red;
position: fixed;
z-index: 1 !important;
bottom: 4.5vh;
right: 0;
background-color: #fff;
padding-top: 60px;
float: right;
}
解决方案2
1 已采纳 2021-12-06 03:56:51
For demonstration purposes, I changed your logos to dummy images.出于演示目的，我将您的徽标更改为虚拟图像。 If you don't want your sideNav class to have a width: 100%;如果您不希望sideNav class 具有width: 100%; you can change the width: fit-content;您可以更改width: fit-content; and give your .sideNav a flex display and use align-items: flex-end;并为您的.sideNav提供弹性显示并使用align-items: flex-end; to align the content to the right.将内容向右对齐。 PLease see the changes I made below to your CSS.请查看我在下面对您的 CSS 所做的更改。
.sideNav { height: 100%; width: fit-content; background-color: red; position: absolute; z-index: 1;important: right; 0: background-color; #fff: display; flex: flex-direction; column: align-items; flex-end. }:sideNav__button { text-decoration; none: color; white; }
<body> <:-- Navegation bar --> <nav class="sideNav d-flex flex-column"> <.-- Navegation icons --> <a class="sideNav__button" href="#"><img class="navIcon" src="https://dummyimage.com/25x25/000/fff" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="https://dummyimage.com/25x25/000/fff" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="https://dummyimage.com/25x25/000/fff" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="https://dummyimage.com/25x25/000/fff" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="https://dummyimage.com/25x25/000/fff" alt=""></a> <a class="sideNav__button" href="#"><img class="navIcon" src="https://dummyimage.com/25x25/000/fff" alt=""></a> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.