使用简单的 CSS 设置 li 的高度答案

【问题标题】：Set Height of li using simple CSS使用简单的 CSS 设置 li 的高度
【发布时间】：2016-02-09 12:30:36
【问题描述】：

我正在尝试使用 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;
    }

【问题讨论】：

@fcalderan，这个问题并没有解决我的问题，这就是为什么我也用图片来提问
好的。那我再开吧。
您如何将附加值放在您的 li 下？
@KashifLatif 你必须使用 line-height 属性吗？
是 1 大 ul 还是可以像我在回答中那样分成几行？

标签： html css

【解决方案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>

【讨论】：

不知道，但你为什么要把列表分成几部分......？
@Paulie_D 每行似乎有 5 个 .. 但当然，底层代码可能是 1 个大 ul，这使得我的解决方案不再那么好用了。 ..我会问OP，如果是，删除（或更改为其他解决方案）
@Paulie_D 更新了我的答案.. 更好？ ;)
@KashifLatif 现在需要运行，但会在一个小时后返回...即使没有更多时间项，您是否希望灰线一直走？
是的，我想要那条灰线直到结束

【解决方案2】：

使用ul li实现这样的设计非常关键。但是，如果您能够在最后一行添加剩余的空 li 元素，请检查此小提琴链接

fiddle link https://jsfiddle.net/SolaceInfotech/y91rosyu/

这可能对你有帮助。

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效
仍然遇到边框问题

【解决方案3】：

正如其他人所说，您不需要在这里使用line-height...只需调整相应的填充。

box-sizing 也很有用。

最后...没有 0.6 像素这样的东西。使用整数，因为不同的浏览器可能会以不同的方式舍入。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.appul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.appul li {
  border-right: 2px solid #CCC;
  border-bottom: 1px dotted red;
  /* for demo only */
  float: left;
  padding: 0 24px 36px;
}
.appul li:nth-child(5n) {
  border-right: none;
}
.appul li:nth-child(5n+1) {
  clear: both;
}
.appul li a {
  color: #00c8cf;
  font-size: 18px;
  cursor: pointer;
}
.appul li a:hover {
  color: #00c8cf;
}

<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>
  <li>10:30</li>
  <li>10:45</li>

</ul>

【讨论】：

【解决方案4】：

试试这个：https://jsfiddle.net/dpyjbqjv/

html:

<ul class="appul">
  <li class="first-row">08:00</li>
  <li class="first-row">08:15</li>
  <li class="first-row">08:30</li>
  <li class="first-row">08:30</li>
  <li class="first-row">08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>08:30</li>
  <li>08:00</li>
  <li>08:15</li>
  <li class="last-row">08:30</li>
  <li class="last-row">08:30</li>
  <li class="last-row">08:30</li>
  <li class="last-row">08:30</li>
</ul>

css:

.appul {
  list-style: none;
  width: 400px;
}

.appul li {
  border-right: 2px solid #CCC;
  float: left;
  padding: 20px;
}

.appul li:nth-child(5n) {
  border-right: none;
}

.appul li.first-row {
  padding-top: 0;
}

.appul li.last-row {
  padding-bottom: 0;
}

【讨论】：