CODEWITHSUNDEEP
htmlcss
Aamu
Aamu

Reputation: 3601

Display divider between the elements

I am creating a nav menu. The nav (.nav) has li which will be used to navigate to different page. Each of the li's are floated and has the width of 20% to use all the screen width.

Now I need to display divider between the li's inside the .nav ul li

enter image description here

I tried using border-left after the first li, but since all of the li are floated in percentage to cover the screen width, the last li goes down. And there is no outline-left/right like the border-left/right.

How do I display/make a divider between the li's without disrupting the width of the li so as all the nav li will be in one line?

html:

<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>
        <i class="fa fa-users"></i>
      </li>
      <li>
        <i class="fa fa-compass"></i>
      </li>
      <li>
        <i class="fa fa-envelope"></i>
      </li>
      <li>
        <i class="fa fa-bell"></i>
      </li>
      <li>
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

css:

#footer-wrapper {
    background: #00A7FF;
}


.nav {
    list-style: none;
}

.nav li {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}

Update

Demo at codepen.

Upvotes: 2

Views: 2059

Answers (4)

Anoop M M
Anoop M M

Reputation: 317

https://jsfiddle.net/06k7r2kr/2/

<div id="footer-wrapper"> <div id="footer"> <ul class="nav"> <li> <i class="fa fa-users"></i> </li> <li> <i class="fa fa-compass"></i> </li> <li> <i class="fa fa-envelope"></i> </li> <li> <i class="fa fa-bell"></i> </li> <li> <i class="fa fa-bars"></i> </li> <span class="clear_both"></span> </ul> </div> </div> it is working use this jsfiddle

Upvotes: 0

Uttam Kumar Roy
Uttam Kumar Roy

Reputation: 2058

here is my approach: JSFiddle Demo

My Changes:

I added border-left: 1px solid #e0e; in .nav li {.. } so divider ( border ) shows and finally add border-left: none; in first li so first li has no left divider.

.nav li {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
    border-left: 1px solid #e0e;
}

.nav li:first-child{
  border-left: none;    
}

here is all code 

#footer-wrapper {
    background: #00A7FF;
}


.nav {
    list-style: none;
}

.nav li {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
    border-left: 1px solid #e0e;
}

.nav li:first-child{
  border-left: none;	
}
.nav li:hover {
    background: #393232;
    color: white;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}
<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>
        <i class="fa fa-users"></i>
      </li>
      <li>
        <i class="fa fa-compass"></i>
      </li>
      <li>
        <i class="fa fa-envelope"></i>
      </li>
      <li>
        <i class="fa fa-bell"></i>
      </li>
      <li>
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Like this used to this

Sibling Selectors and :after and position relative define your li tag than used to li + li:after tag and assign value content , position, left, top, bottom, border as like this 

li + li:after

Demo Code here 

#footer-wrapper {
    background: #00A7FF;
  overflow:hidden;
}


.nav {
    list-style: none;margin:0;padding:0;width:100%;float:left;
}

.nav li {
    float: left;
  position:relative;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}
.nav li + li:after{
  content:"";
  position:absolute;
  left:0;
  border-left:solid 1px black;
  top:0;
  bottom:0;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}
<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>
        <i class="fa fa-users"></i>
      </li>
      <li>
        <i class="fa fa-compass"></i>
      </li>
      <li>
        <i class="fa fa-envelope"></i>
      </li>
      <li>
        <i class="fa fa-bell"></i>
      </li>
      <li>
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

Upvotes: 1

nihar jyoti sarma
nihar jyoti sarma

Reputation: 541

<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>a
        <i class="fa fa-users"></i>
      </li>
      <li>b
        <i class="fa fa-compass"></i>
      </li>
      <li>c
        <i class="fa fa-envelope"></i>
      </li>
      <li>d
        <i class="fa fa-bell"></i>
      </li>
      <li>e
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

<style>

#footer-wrapper {
    background: #00A7FF;
}


.nav {
    list-style: none;
}

.nav li {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}
.nav li:before {
content: " | ";
}

.nav li:first-child:before {
content: none;
}
</style>

Upvotes: 0

Related Questions