Question

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

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

会丢失其右侧的边框。我该如何解决？
这是样本小提琴：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>

列表项中的CSS边框

1 个答案: