页面右侧的导航栏

Question

我正在设计网页。我已经创建了导航栏，但问题是我希望它位于页面的右侧。我试过使用 float: right 但它不起作用。滚动页面时效果很好，因为它会移动以保持原位，但我无法将它发送到页面右侧，比如两天了。

提前致谢。

这是我的 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>

Answer 1

你可以试试这个（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;
    }

Answer 2

出于演示目的，我将您的徽标更改为虚拟图像。如果您不希望 sideNav class 具有 width: 100%;，您可以更改 width: fit-content; 并为 .sideNav 提供 flex 显示并使用 align-items: flex-end; 将内容右对齐。请查看我在下方对您的 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>

页面右侧的导航栏

Navigation bar to the right side of the page

html

css

nav