时间戳

首页 > 解决方案 > 列表项中的 CSS 边框

html - 列表项中的 CSS 边框

问题描述

嗨，我在列表项中使用边框时遇到问题。
我想让 <li> 中的所有元素都有边框，但是超过窗口宽度的 <li> 会在右侧失去边框。我怎样才能解决这个问题？
这是示例小提琴：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;
}

标签： htmlcss

解决方案

使用轮廓而不是边框​​，您不再需要删除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>

推荐阅读