Question

我在li列表中有元素，我想用一条简单的线将它们连接起来，使其看起来像管道。

我想对这些元素实现类似管道的结构

我准备的HTML

<ul>
    <li class="pipeline-box">New</li> ---
    <li class="pipeline-box">Order Placed</li> ---
    <li class="pipeline-box">Order confirmed</li>---
    <li class="pipeline-box">In Process</li>---
    <li class="pipeline-box">Ready For Dispatch</li>---
    <li class="pipeline-box">On the Way</li>---
    <li class="pipeline-box">Delivered</li>
</ul>

管道箱的CSS

.pipeline-box {
      border: 1px solid #696666;
      width: fit-content;
      padding: 6px;
      background: #cccec9;
      border-radius: 50px;
      font-family: "avenir Medium";
      font-size: 0.8rem !important;
    }

我想要这样

Answer 1

您并不是真的在使用ul / li功能，所以我建议

   .pipeline-box {
      border: 1px solid #696666;
      width: fit-content;
      padding: 6px;
      background: #cccec9;
      border-radius: 50px;
      font-family: "avenir Medium";
      font-size: 0.8rem !important;
    }
    
 .list {
     flex-direction: row;
     box-sizing: border-box;
     display: flex;
     place-content: center space-around;
     align-items: center;
}

<div class="list">
    <div class="pipeline-box">New</div> ---
    <div class="pipeline-box">Order Placed</div> ---
    <div class="pipeline-box">Order confirmed</div>---
    <div class="pipeline-box">In Process</div>---
    <div class="pipeline-box">Ready For Dispatch</div>---
    <div class="pipeline-box">On the Way</div>---
    <div class="pipeline-box">Delivered</div>
</div>

旁注：使用!important通常被认为是不好的做法，请尽量避免使用

Answer 2

只需使用CSS伪元素:after。 ---连接器只是表示元素，而不是内容的一部分，因此最好与代码结构分开。

在下面的示例中，我使用:last-child删除了最后一个元素中的多余连接器。

.pipeline-box {
  display: inline-block;
}
.pipeline-box::after {
  content: "---";
}

.pipeline-box:last-child::after {
  display: none;
}

<ul class="list">
    <li class="pipeline-box">New</li>
    <li class="pipeline-box">Order Placed</li>
    <li class="pipeline-box">Order confirmed</li>
    <li class="pipeline-box">In Process</li>
    <li class="pipeline-box">Ready For Dispatch</li>
    <li class="pipeline-box">On the Way</li>
    <li class="pipeline-box">Delivered</li>
</ul>

顺便说一句，您不必在每个元素上都需要“ pipeline-box”类（特别是如果所有元素都具有相同的类，那是没有意义的），则可以使用{{1} }，并使用ul定位对象，假设列表中的所有.list li元素都将连接。或将li类添加到pipeline-box中。

Answer 3

在span内添加了一个li，其中将包含文本并显示为气泡，然后使用::before的{{1}}进行了链接。

li

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.pipeline-box {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: -5px;
  position: relative;
  width: auto;
}
.pipeline-box::before {
  background: #c5c5c5;
  content: "";
  height: 1px;
  left: 32px;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 0;
}
.pipeline-box>span {
  background: #f8f8f8;
  border: 1px solid #c5c5c5;
  border-radius: 50px;
  display: inline-block;
  font-family: "avenir Medium";
  font-size: 0.8em !important;
  line-height: 1em;
  margin: 0 30px 0 0;
  padding: 7px 12px;
  position: relative;
  z-index: 1;
}
.pipeline-box:last-child>span {
  margin: 0;
}

Answer 4

我想出了解决办法。

HTML页面现在

<ul class="pipeline-box">
    <li><span>New</span></li>
    <li><span>Order Placed</span></li>
    <li><span>Order confirmed</span></li>
    <li><span>In Process</span></li>
    <li><span>Ready For Dispatch</span></li>
    <li><span>On the Way</span></li>
    <li><span>Delivered</span></li>
</ul>

而SCSS是

.pipeline-box {
      li{
        align-content: center;
        border: 1px solid #696666;
        text-align: center;
        width: 125px;
        padding: 6px;
        background: #f8f8f8;
        border-radius: 50px;
        font-family: "avenir Medium";
        font-size: 0.8rem !important;
        position: relative;
      }
      li:after{
        content: '';
        width: 17px;
        height: 2px;
        background-color: #afa4a4;
        position: absolute;
        z-index: 0;
        top: calc(50% - 2px);
        right: -18px;
      }
      li:before{
        content: '';
        width: 17px;
        height: 2px;
        background-color: #afa4a4;
        position: absolute;
        z-index: 0;
        top: calc(50% - 2px);
        left: -18px;

      }

      li:last-child:after {
        display: none;
      }

      li:first-child::before {
        display: none;
      }
    }

现在看起来像这样。 result

如何以角形连接UL> LI列表项（无jQuery）

4 个答案: