水平列表项之间带有分隔线

Question

我正在尝试在水平导航栏的<li>元素之间放置一条细灰色水平线，以提供这些元素之间的连接感知。 代码如下所示。 我该如何在这些元素之间添加简单的线条？

ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}
li {
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

- Lucas Bastos

---

当你说“between”时，你是指该线应通过字符本身的中间吗？ - Andy Hoffman

我想要的是不通过元素，而是在元素之间水平并排。 - Lucas Bastos

Answer 1

这里是每个

标签之间运行一条线的示例。

请参考以下图片： 操作步骤如下：

1. 在

中添加position: relative，使其成为:after元素的父元素。 2. 使用垂直平移将:after定位于字符的垂直中心。 3. 为
• 元素提供z-index和background-color，使它们保持在灰色线条的上方。

  ul {
      display: flex;
      align-items: stretch; /* Default */
      justify-content: space-between;
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
  }
  
  li {
      display: block;
      flex: 0 1 auto; /* Default */
      list-style-type: none;
      background-color: white;
      padding: 0 0.75em;
      z-index: 1;
  }
  
  li:first-child {
      padding-left: 0;
  }
  
  li:last-child {
      padding-right: 0;
  }
  
  ul:after {
      content: '';
      border-bottom: 1px solid lightgray;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      width: 100%;
  }

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

- Andy Hoffman

---

谢谢Andy，这正是我所想的。 - Lucas Bastos

如何使这个列表垂直显示 - Pawan Deore

@PawanDeore 就像这个例子：https://jsfiddle.net/0Lugz3nq/2/ - Andy Hoffman

Answer 2

您也可以进行简单的背景色设置：

ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  background:linear-gradient(#ccc,#ccc)  center/100% 1px no-repeat;
}

li {
  list-style-type: none;
  background-color: white;
  padding: 20px;
  font-size:25px;
}

li:first-child {
  padding-left: 0;
}

li:last-child {
  padding-right: 0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

这里有一种方法可以实现透明效果：

ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(blue,blue) left  50px top 50%,
    linear-gradient(blue,blue) right 50px top 50%,
    linear-gradient(blue,blue) center;
  background-size:calc((100% - 4*50px)/3) 1px;
  background-repeat:no-repeat;
}

li {
  list-style-type: none;
  width: 50px;
  font-size:25px;
  text-align:center;
}

body {
 background:pink;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

- Temani Afif

Answer 3

如果您不介意将文本居中在导航栏上，这个解决方案应该适合您。

ul {
  display: flex;
  align-items: stretch; /* Default */
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}
li {
  display: block;
  flex: 0 1 auto; /* Default */
  list-style-type: none;
  flex:1;
  text-align:center;
  border-right:1px solid gray;
}
li:last-of-type{
  border-right:none;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

- jleggio

---

谢谢，jleggio。实际上，这将是一条水平线，以提供连接感知，就像Andy Hoffman上面写的那样。 - Lucas Bastos

Answer 4

我不是很理解“between”的意思，但你可以添加一个：

li { border-left: 1px solid gray; border-right: 1px solid gray;

就像我说的，不确定这是否是你所指的。 :)

- Jaimy Van Gyseghem

---

如果您不确定问题是关于什么的，请要求澄清（当您拥有50个声望时），或者干脆不回答。 - gre_gor