CODEWITHSUNDEEP
htmlcssnav
Kai
Kai

Reputation: 7

How do I space out the links equally in a nav bar?

Hi im new to html and css and I am unable to space out the links in a nav bar.

This is what i am trying to get: image

This is what I have so far:

.topnav {
  overflow: hidden;
  background-color: white;
  border: 5px solid black;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}
<h1>ABOUT ME</h1>
<div class="topnav">
  <nav>
    <ul>
      <a href="aboutme.html">About Me</a>
      <a href="mypast.html">My Past</a>
      <a href="mypresent.html">My Present</a>
      <a href="myfuture.html">My Future</a>
      <a href="feedback.html">Feedback</a>

    </ul>
  </nav>
</div>

Upvotes: 0

Views: 577

Answers (4)

BALVARDHAN
BALVARDHAN

Reputation: 59

.topnav a {
    display: inline-block;
    color: black;
    background-color: rgb(233, 233, 233);
    text-align: center;
    padding: 5px;
    text-decoration: none;
    font-size: 17px;
    flex: 1;
    border: 3px solid black;
}

ul{
    display: flex;
    justify-content: center;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 5px solid black;
    border-bottom: 5px solid black;
    padding: 0;
    background-color: black;
}

Upvotes: 1

Manideep Pullalachervu
Manideep Pullalachervu

Reputation: 39

.topnav ul {
  display: flex;
  justify-content: space-around;
}

Upvotes: 0

Abhishek Pakhare
Abhishek Pakhare

Reputation: 494

.topnav {
 overflow: hidden;
 background-color: white;
border: 5px solid black;

}

.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 30px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;


}

ul {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding : 0;
}
<h1>ABOUT ME</h1>
<div class="topnav">
<nav>
  <ul>
     <a href="aboutme.html">About Me</a>
     <a href="mypast.html">My Past</a>
     <a href="mypresent.html">My Present</a>
     <a href="myfuture.html">My Future</a>
     <a href="feedback.html">Feedback</a>
     
  </ul>
</nav>
</div>

Upvotes: 0

WeeklyButterfly34
WeeklyButterfly34

Reputation: 101

I've renamed your nav element as the "topnav" class. Instead of using display block, using display flex as it will help re-adjust your items to be responsive relative to the navbar. You can use the justify-contents: space-evenly to make sure you get equal distance between each text item.

I've attached a sample snippet of the code below for you to test out!

 .topnav {
     overflow: hidden;
     background-color: white;
     border: 5px solid black;

 }

 .topnav ul {
     display: flex;
     justify-content: space-evenly;
     color: black;
     text-align: center;
     text-decoration: none;
     font-size: 17px;
     border-bottom: 3px solid transparent;
 }

 .topnav ul a {
     text-decoration: none;
 }
<body>
<h1>ABOUT ME</h1>
<nav class="topnav">
  <ul>
     <a href="aboutme.html">About Me</a>
     <a href="mypast.html">My Past</a>
     <a href="mypresent.html">My Present</a>
     <a href="myfuture.html">My Future</a>
     <a href="feedback.html">Feedback</a>
  </ul>
</nav>

</body>

Upvotes: 0

Related Questions