页面右侧的导航栏答案

【问题标题】：Navigation bar to the right side of the page页面右侧的导航栏
【发布时间】：2021-12-06 03:43:15
【问题描述】：

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

提前谢谢你。

这是我的 HTML，我跳过了 Hero 部分，因为它是另一个 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>

【问题讨论】：

标签： html css nav

【解决方案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;
    }

【讨论】：

【解决方案2】：

出于演示目的，我将您的徽标更改为虚拟图像。如果您不希望您的sideNav 类具有width: 100%;，您可以更改width: fit-content; 并给您的.sideNav 一个弹性显示并使用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>

【讨论】：