使 <a> 标签位于 div 右侧

Question

我正在尝试制作一个浮岛导航栏，我希望所有链接都转到我的容器的右侧，但它不起作用。我尝试将它放入我的父容器中，但它只是搞乱了其他样式。

.nav {
  display:flex;
  flex-direction: row;
  line-height: 20px;
}

.island{
  position: absolute;
  display:flex;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary);
  z-index: 100; 
  width:35%;
  border-radius: 100px; 
  padding:10px;
}

.island img{
  width: 50px;
}


.linkcontainer a{
  margin:20px;
  color:white;
  font-size: 14px;
  height:100%;
  justify-content: right;
}

  <div class = "container">
    <div class = "announcment"></div>
    <div class = "Main">
      <header>
        <div class = "nav">
          <div class = "shorten">
            <div class = "main">
              <div class = "island" >
                <img src = "Images/Logo.png">
                <div class = "links">
                  <div class = "linkcontainer">
                    <a>Link</a>
                    <a>Link</a>
                    <a>Link</a>
                    <a>BTN</a>
                    <a>BTN</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    </div>
  </div>

我已经编码一年了，所以我真的不太了解

Answer 1

要将链接在岛内向右对齐，您可以调整 .linkcontainer 中的 Flexbox 属性。

<style>
  .nav {
    display: flex;
    justify-content: center; /* Center the island horizontally */
  }

  .island {
    position: absolute;
    display: flex;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    z-index: 100;
    width: 35%;
    border-radius: 100px;
    padding: 10px;
    justify-content: flex-end; /* Align links to the right */
    align-items: center; /* Center items vertically */
  }

  .island img {
    width: 50px;
    margin-right: 10px; /* Add some margin between the logo and links */
  }

  .linkcontainer {
    display: flex;
    justify-content: flex-end; /* Align links to the right */
    flex-grow: 1; /* Allow links to take all available space */
  }

  .linkcontainer a {
    margin: 0 10px; /* Adjust the margin for links */
    color: white;
    font-size: 14px;
    text-decoration: none; /* Remove underline from links */
  }
</style>

<div class="container">
  <div class="announcment"></div>
  <div class="Main">
    <header>
      <div class="nav">
        <div class="shorten">
          <div class="main">
            <div class="island">
              <img src="Images/Logo.png">
              <div class="links">
                <div class="linkcontainer">
                  <a href="#">Link</a>
                  <a href="#">Link</a>
                  <a href="#">Link</a>
                  <a href="#">BTN</a>
                  <a href="#">BTN</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </div>
</div>

Answer 2

将其添加到您的链接容器类中

.linkcontainer{ text-align: right }