我正在制作一个垂直无序阻止列表(在div内),其中每个li下都有一个边框。但不知何故,边框不适合div的整个宽度。我想ul必须完全适合div才能做到这一点,但我不知道怎么做。
这是div和ul的屏幕截图:
这是我正在使用的CSS代码:
.stats-list li{
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
.stats-list ul{
list-style-type:none;
}
我以前从未遇到过这个问题。有没有人有任何解决方案?感谢。
更新(HTML code):
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
另一个更新(父div的CSS代码):
.checkin-stats-right{
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
答案 0 :(得分:1)
默认情况下,UL
元素通常会将padding-left
设置为一定数量的像素。试试这个:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.stats-list li {
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
ul.stats-list {
list-style-type:none;
padding-left: 0;
}
.checkin-stats-right {
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
</body>
</html>
答案 1 :(得分:1)
.stats-list ul {
padding-left: 0;
}
另请注意,HTML中的“ul.stats-list”与“.stats-list ul”不匹配