gpt4 book ai didi

html - 无序列表中的边框不适合 div 的整个宽度

转载 作者:行者123 更新时间:2023-11-28 00:21:05 24 4
gpt4 key购买 nike

我正在制作一个垂直的无序 block 列表(在一个 div 内),其中每个 li 下方都有一个边框。但不知何故,边框不适合 div 的整个宽度。我想 ul 必须完全适合 div 才能执行此操作,但我不知道如何。

这是 div 和其中的 ul 的屏幕截图:

list in the div

这是我正在使用的 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 代码):

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

}

最佳答案

默认情况下,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>

关于html - 无序列表中的边框不适合 div 的整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8862618/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com