<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我有以下 Code ，我试图从 div 的右侧和底部删除重叠的边框。请帮忙
<div class="lc">
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</div>
.lc:after, .lc:before {
display : table;
content : "";
}
.lc:after {
clear :both;
}
.lc {
border: 1px solid #000;
padding-right : -1px;
}
ol li {
list-style : none;
display : block;
box-sizing : border-box;
border-right : 1px solid #000;
border-bottom : 1px solid #000;
float :left;
width : 10%;
padding : 20px;
}
ol {
margin :0;
padding : 0;
}
我不想使用表格布局来完成此操作。我尝试了边框调整的所有排列和组合，但没有结果。
最佳答案
/* you can use this method i have removed the border from
.lc class and added a pseudo element for ol with the now the border
is over the border of li*/
.lc:after,
.lc:before {
display: table;
content: "";
}
.lc:after {
clear: both;
}
.lc {} ol li {
list-style: none;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #000;
float: left;
width: 10%;
padding: 20px;
border-right: 1px solid #000;
}
/* added float left to clear float of children
and position relative for the pseudo element
*/
ol {
position: relative;
float: left;
}
/* below is the pseudo element*/
ol:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border: 1px solid #000;
}
ol {
margin: 0;
padding: 0;
}<div class="lc">
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</div>关于css - 无法删除 float Div 的边框重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33972986/