user1760110
user1760110

Reputation: 2336

How to add top and bottom border to list

I am working on this demo. Why am I not able to add top and bottom borders to the list items?

li {
    list-style-type:none;
    line-height:35px;
    border-top: 1px solid #32353e;
    border-bottom: 1px solid #1a1c20;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #c9d4f6;
    font-weight: 300;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

Upvotes: 0

Views: 74

Answers (1)

Howli
Howli

Reputation: 12469

You need to add a width to the <li> tag.

I have edited your jsfiddle http://jsfiddle.net/j95B8/2/

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html, body {
width: 100%;
height: 100%;
}

.toc {
background-color:#272930;
height: 100%;
}
.tocicon {
color:white;
}
.main {
background-color:#272930;
height: 100%;
}
li {
list-style-type: none;
line-height: 35px;
border-top: 1px solid #0640EC;
border-bottom: 1px solid #0055FF;
display: block;
padding-top: 15px;
padding-bottom: 15px;
color: #c9d4f6;
font-weight: 300;
width: 30px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
}

Upvotes: 1

Related Questions