CODEWITHSUNDEEP
htmlcss
Eden Chew
Eden Chew

Reputation: 119

How to make a navigation bar have equal spacing?

I'm not sure how to ask this question exactly but I'm making a navigation bar using HTML and CSS with unordered list.

As shown in the picture below, the spacing for example between Home and About Us tab is not the same as the spacing between Contact Us and Get Involved.

https://i.sstatic.net/piowp.jpg

My CSS code for my navigation bar is as below,

.nav {
    width:898px;
}

.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
    font-family: 'Roboto', sans-serif;
    width: 149.6666666px;
    border-bottom: none;
    height: 106px;
    line-height: 106px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}

.nav a {
  text-decoration: none;
  color:#000000;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #5c89c7;
  color:#FFFFFF;
}

Upvotes: 3

Views: 2128

Answers (1)

Sunil Kumar B M
Sunil Kumar B M

Reputation: 2795

.nav li {
    font-family: 'Roboto', sans-serif;
    width: 149.6666666px;
    border-bottom: none;
    height: 106px;
    line-height: 106px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}

In the above styling, width property is fixed. All the list items will be of equal width, irrespective of their content. Instead, get rid of width and play around with padding. For example:

padding-right: 5px;
padding-left: 5px;

This will give a 10px spacing between all the list elements despite the content.

Upvotes: 2

Related Questions