列表项目的顶部正在被切断

Question

我似乎无法弄清楚是什么让我的列表项看起来像这样。它看起来像列表项不占用ul的整个高度，但我无法弄清楚该怎么做才能使它正常工作。我试过几乎可以想到的每个css组合（边距，填充，负边距，定义高度，浮动元素）。有什么建议吗？

http://www.connectroot.com/directory/

---

Answer 1

只使用背景：不是背景图片：

这应该有效：

.filter {
    display: inline-block;
    color: #FFF;
    font-size: 12px;
    line-height: 15px;
    border-radius: 10px;
    padding: 10px 10px 5px 10px;
    margin: 5px;
    background: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%);
    background: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%);
    background: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(0,0,0)), color-stop(1, rgb(102,51,102)));
}

这会使文本看起来有点奇怪，但你可以通过一些填充来解决这个问题

padding: 5px 10px 5px 10px;

Answer 2

问题是你已经在这里定位了背景

ul li {
background-image: url('images/cr-bullet.png');
background-repeat: no-repeat;
background-position: 0px 5px; //cause of the problem
padding-left: 30px;
margin-bottom: 15px;
}

删除此background-position: 0px 5px;并应解决

或者将background-position: 0;添加到.filter{ css }