CODEWITHSUNDEEP
htmlcss
Zaib Azhar Rao
Zaib Azhar Rao

Reputation: 108

full page border of un-order list

I have a horizontal unordered list, the list is almost half width of screen.

The problem is that the border-bottom applied to the last <li> element does not extend to the full width of the page.

.pageContent .filters{
    margin:0px;
    padding:0px;
    list-style:none;
}
.filters li{
    float:left;
    display:inline;
    border-right:1px solid #e5e6e7;
    border-bottom:1px solid #e5e6e7;    
}
.filters li:last-child{
    border-right:none;
}
.filters li:hover{
    background-color:#fcfcfc;
}
.filters li a{
    display:block;
    padding: 12px 35px;
    font-size: 18px;
    color:#353535;
    text-transform:capitalize;
    font-family:'regular';
}

Upvotes: 0

Views: 97

Answers (1)

Josh Harrison
Josh Harrison

Reputation: 6004

This should do what you're looking for.

Using the following CSS, you get this: http://jsfiddle.net/6AGTM/

.filters{
  margin:0px;
  padding:0px;
  list-style:none;
  overflow: hidden; /* make container the same height as floating elements inside */
  border-bottom:1px solid #e5e6e7; /* apply border to this element which goes to edge of page */
  }
.filters li{
  float:left;
  display:inline;
  border-right:1px solid #e5e6e7;
  /* remove border-bottom from here */
  }
.filters li:last-child{
  border-right:none;
  }
.filters li:hover{
  background-color:#fcfcfc;
  }
.filters li a{
  display:block;
  padding: 12px 35px;
  font-size: 18px;
  color:#353535;
  text-transform:capitalize;
  font-family:'regular';
  }

Upvotes: 1

Related Questions