Geek Answers Handbook

Make the navbar divider on the windshield evenly distributed

How to make the vertical dividers in the navigation bar evenly distributed?

Here is the HTML and CSS that I am currently using.

HTML:

<li class="divider-vertical"><a href = "#">Contact Us</a></li>

CSS

 .divider-vertical { height: 50px; margin: 0 9px; border-left: 1px solid #F2F2F2; border-right: 1px solid #FFF; }

Navigator Code:

 <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href = "#">Home</a></li> <li class="divider-vertical"><a href = "#">About</a></li> <li class="divider-vertical"><a href = "#">Jobs</a></li> <li class="divider-vertical"><a href = "#">Contact Us</a></li> <li class="divider-vertical"><a href = "#">Resources</a></li> </ul> </div> </nav>
+5
source share
3 answers

There are several ways to achieve the effect you are using. Here is a short solution that will help solve your problem and give you the desired result.

  .divider-vertical { height: 50px; margin: 0 0 0 9px; padding: 0 0 0 9px; border-left: 1px solid red; }

The best approach that will allow you to write a little html is to do something like the following:

  • Remove the .divider-vertical class from HTML
  • Customize your .li elements, use margin and padding on the same side as your border - in this case, right
  • we will use the Pseudo class :last-child to remove some css attributes from the last menu item

 li { border-right: 1px solid red; margin: 0 9px 0 0; padding: 0 9px 0 0; } li:last-child { border-right: none; } 
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href = "#">Home</a></li> <li><a href = "#">About</a></li> <li><a href = "#">Jobs</a></li> <li><a href = "#">Resources</a></li> </ul> </div> </nav>
+1
source

Take a look at this. I added the divider-vertical class to the Home <li> to create its style.

Jsfiddle

HTML

  <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li class="divider-vertical"><a href = "#">Home</a></li> <li class="divider-vertical"><a href = "#">About</a></li> <li class="divider-vertical"><a href = "#">Jobs</a></li> <li class="divider-vertical"><a href = "#">Resources</a></li> </ul> </div> </nav>

CSS

 .divider-vertical { height: 50px; width:100px; margin: auto; border-left: 1px solid black; border-right: 1px solid red; text-align:center; }
+1
source

You need to change your CSS to the following:

 .divider-vertical { height: 50px; border-left: 1px solid #F2F2F2; border-right: 1px solid #FFF; }

You had an edge left and right equal to 9px.

If you want to use extra space:

 padding: 0 9px;

instead of this. here is a working example, but you will need to stretch the panel with the result to see it, since bootstrap turns your navigator into a navigator on jsfiddle default width.

+1
source

More articles:


All Articles