无法删除Floated Div的边框重叠

Question

我有以下Code，我试图从div的右边和底部删除重叠的边框。请帮忙

HTML

<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

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

}

我不想使用表格布局来完成此任务。我尝试了所有排列和边框调整的组合，但没有结果。

Answer 1

更改课程

.lc {
     border-top: 1px solid #000;
     border-left: 1px solid #000;
    padding-right : -1px;
   }

希望有所帮助

Answer 2

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;