使用简单的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来实现时间项之间的距离，我在其中设置了一个主要的顶部填充，并在前五个时间再次将其删除。

.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>

Answer 2

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

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

可能对你有帮助。

Answer 3

正如其他人所说，你不需要在这里使用def print_intro(): if len(soup.find_all('p')[0].get_text()) > 100: paragraph = soup.find_all('p')[0].get_text() phrase_list = paragraph.split('.') print(phrase_list[0]) ...只需调整相应的填充。

line-height也很有用。

最后......没有.6像素的东西。使用整数，因为不同的浏览器可能会有不同的轮次。

box-sizing

* {
  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;
}

Answer 4

试试这个：

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;
}