HTML CSS中的垂直线[重复]答案

【问题标题】：vertical lines in HTML CSS [duplicate]HTML CSS中的垂直线[重复]
【发布时间】：2021-09-28 13:46:15
【问题描述】：

所以我试图在单词之间画垂直线，其中有缩进......我在网上找到了一些东西，但还是有点困惑。

到目前为止我所拥有的：

我希望它们看起来如何：

我知道如何创建链接和垂直线，但我无法找到如何在单词之间缩进并在它们之间放置垂直线。

任何帮助表示赞赏！

【问题讨论】：

你能提供一些代码吗？
欢迎来到 Stack Overflow！请访问help center，使用tour 了解How to Ask 的内容。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet
请向我们提供一些与该主题相关的代码，以便我们更好地了解发生了什么，您发布的是结果和图像格式的预期输出。

标签： html css

【解决方案1】：

使用 CSS 和 border.
去掉:last-child的右边框

.row {
  display: flex;
  justify-content: center;
}

.links a {
  padding: 0 1.2rem;
  border-right: 2px solid #888;
}

.links a:last-child {
  border-right: 0;
}

<div class="row links">
  <a href="#">Some link 1</a>
  <a href="#">Some link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Some link 4</a>
</div>

【讨论】：

【解决方案2】：

您可以使用border-left 属性并在每个前置子项上使用它

.row {
  display: flex;
  justify-content: center;
}

a {
  padding: 0 1rem;
}

a + a {
  border-left: 2px solid #888;
}

<div class="row">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

【讨论】：

我真的很喜欢你的a + a 解决方案。干得好

【解决方案3】：

用display:flex将所有元素包装在div中

<div class="wrapper"> 
   
   **your codes**

</div>

.wrapper{
    display: flex;
}

【讨论】：