Question 303935 in CSS Question posted in
Some basic documentation can be found here.

Css – Make <a> tags go to right of div

I’m trying to make a floating island navbar, and I want all the links to go to the right of my container, but it’s not working. I tried putting it in my parent container but it just messed up the other styling.

.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>

I’ve only been coding for a year now so I don’t really know much.

Tags:

3

Answers


  1. 0

    To align the links to the right within the island, you can adjust the flexbox properties within the .linkcontainer.

    <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>
    Login or Signup to reply.
  2. 0

    Add this to your link-container class
    .linkcontainer{ text-align: right }

    Login or Signup to reply.
  3. 0

    Just use flex display with column value for flex-direction.

    For child items (a elements) set margin-left: auto for it to position items on the right side (it will expand left margin to take rest of space).

    div {
    display: flex;
    flex-direction: column;
    border: 1px solid black;
}

div > a {
    margin-left: auto;
}
    <div>
    <a href='https://google.com/'>Google</a>
    <a href='https://yahoo.com/'>Yahoo</a>
    <a href='https://bing.com/'>Bing</a>
</div>

    EDIT

    Maybe you could add display:block; to .linkcontainer a selector. I also changed color of links to default to make them visible.

    .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{
  display:block;
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search