HTML CSS中的垂直线[重复]

Posted 2023-04-13

【中文标题】HTML CSS中的垂直线[重复]

【英文标题】：vertical lines in HTML CSS [duplicate]

【发布时间】：2021-09-28 13:46:15

【问题描述】：

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

到目前为止我所拥有的：

我希望它们看起来如何：

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

任何帮助表示赞赏！

【问题讨论】：

你能提供一些代码吗？

欢迎来到 Stack Overflow！请访问help center，使用tour 了解How to Ask 的内容。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet

请向我们提供一些与该主题相关的代码，以便我们更好地了解发生了什么，您发布的是结果和图像格式的预期输出。

【参考方案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;