html - 列表项中的 CSS 边框

Question

您好，我在列表项中使用边框时遇到问题。
我想让

中的所有元素都有边框，但是超过窗口宽度的

会在右侧丢失边框。我该如何解决这个问题？
这是示例 fiddle :https://jsfiddle.net/zmLp86dy/

.line-row {
    list-style: none;
    font-size: 0;
    height: 22px;
    margin-top: 2px;
    padding-inline-start: 0;
}

.line-row li {
    display: inline-block;
    border-radius: 0%;
    width: 35px;
    height: 20px;
    margin-top: 2px;
    background: #737373;
    border: 1px solid #000;
    border-right: 0px;
}

.line-row li:nth-last-of-type(1) {
    border-right: 1px solid #000;
}

ul li.success {
    background: #00ff00;
}

ul li.delayed {
    background: #ff0000;
}

Answer 1

使用轮廓而不是边框​​，您不再需要删除 border-right。简单地增加 margin-top 因为在高度计算和位置中不考虑轮廓:

.line-row {
    list-style: none;
    font-size: 0;
    height: 22px;
    margin-top: 2px;
}

.line-row li {
    display: inline-block;
    border-radius: 0%;
    width: 35px;
    height: 20px;
    margin-top: 4px;
    background: #737373;
    outline: 1px solid #000;
}

ul li.success {
    background: #00ff00;
}

ul li.delayed {
    background: #ff0000;
}

<div class="timeline" style="display: inline-block;">
  <ul class="batch line-row">
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
    <li class="success"></li>
  </ul>
</div>