html - 使用简单的 CSS 设置 li 的高度

Question

我正在尝试使用 ul li 创建一个模型，我需要的是

我得到了类似的东西

这里我面临的问题是 li 的高度，第一张图片中第一行上方和最后一行下方没有高度，但我将其放入第二张图片中，我的代码是

<ul class="appul">
  <li>08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>.....</li>
</ul>

CSS

.appul {
        list-style: none;
    }
    .appul li {
        border-right: 2px solid #CCC;
        float: left;
        padding: 0px 15.6px;
        line-height: 50px;
    }
    .appul li:nth-child(5n) {
        border-right: none;
    }
    .appul li a {
        color: #00c8cf;
        font-size: 18px;
        cursor: pointer;
    }
    .appul li a:hover {
        color: #00c8cf;
    }

Answer 1

已更新

这里使用 padding 而不是 line-height 来实现时间项之间的距离，我在这里设置了一个主要的顶部填充，然后再次将其删除前 5 个。

.appul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
  overflow: hidden;
  
}
.appul:before,
.appul:after {
  content: ' ';
  position: absolute;
  display: block;
  border-color: #CCC;
  border-width: 0 2px;
  border-style: solid;
  top: 0;
  left: 20%;
  width: 20%;
  height: 100%;
  pointer-events: none;   /* Alt. 1: let mouse event pass through   */
  z-index: -1;            /* Alt. 2: put pseudo elements beneath    */
}
.appul:after {
  left: 60%;
}

.appul li {
  float: left;
  box-sizing: border-box;
  width: 20%;
  vertical-align: top;
  padding: 30px 0 5px;
  text-align: center;
}
.appul li:nth-child(-n+5) {
  padding-top: 5px;
}
.appul li a:hover {
  color: #00c8cf;
  font-size: 18px;
  cursor: pointer;
}

<ul class="appul">
  <li>08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>08:45</li>
  <li>09:00</li>
  <li>09:15</li>
  <li>09:30</li>
  <li>09:45</li>
  <li>10:00</li>
  <li>10:15</li>
  <li>10:30</li>
  <li>10:45</li>
</ul>

如果您确实想将列长度更改为小于或大于 5，此变体可能很有用

.appul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(90deg, #ccc 2px, transparent 2px);
  background-size: calc(20% + 4px) 100%;
  background-position: calc(25% - 4px) 100%;
}
.appul li {
  float: left;
  box-sizing: border-box;
  width: 20%;
  vertical-align: top;
  padding: 30px 0 5px;
  text-align: center;
}
.appul li:nth-child(-n+5) {
  padding-top: 5px;
}
.appul li a:hover {
  color: #00c8cf;
  font-size: 18px;
  cursor: pointer;
}

<ul class="appul">
  <li>08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>08:45</li>
  <li>09:00</li>
  <li>09:15</li>
  <li>09:30</li>
  <li>09:45</li>
  <li>10:00</li>
  <li>10:15</li>
  <li>10:30</li>
  <li>10:45</li>
</ul>