html - 列表顶部的项目被切断

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 }