向列表添加顶部和底部边框的问题

时间:2014-03-10 17:26:42

标签: css css3

请您查看This Demo并告诉我为什么我无法在列表项中添加顶部和底部边框?

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);
}

由于

1 个答案:

答案 0 :(得分:1)

您需要为<li>标记添加宽度。

我已编辑过您的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);
}
}