css在两个div之间添加分割线[重复]

Posted 2023-04-13

【中文标题】css在两个div之间添加分割线[重复]

【英文标题】：css add a splitline between two div [duplicate]

【发布时间】：2018-07-01 03:42:25

【问题描述】：

您好，我正在尝试在“主页”和“购物车”选项卡以及“帮助”和“联系”选项卡之间放置一条分割线。

 .tab-separator display: inline-block;
                    padding-right: 5px;         
                    border-right-style: solid;
                    border-right-width: thin;
                    border-right-color: red;
                    height: 10px;
                    

<div class="tab-separator">
<div class="tab-menu" id="tab" style="display: inline-block;">
  <a href="#">Home </a>
</div>



</div>
<div class="tab-menu" id="tab1" style="display: inline-block;">
  		<a href="#">Cart</a>
</div>
<div class="tab-separator">
<div class="tab-menu" id="tab2" style="display: inline-block;">
  		<a href="#">
   Help
  </a>
</div>
</div>
<div class="tab-menu" id="tab3" style="display: inline-block;">
  		<a href="#"> Contact</a>
</div>

我尝试通过显示 div 选项卡周围的 div 的边框来做到这一点。但是我有一个问题，我无法按照我的意愿移动分割线。我希望它不要那么高，但是如果我设置了一个边距顶部它不起作用，它会移动每个标签。

所以我想要的是分割线稍微低一点，也许低 2 个像素。

【问题讨论】：

为什么要将主要的DIV 高度固定为10px？

你想多了。这可以通过使用“|”轻松完成键盘上的字符。把它放在你的文本之间，并随意设置它的样式。或者，您可以通过 CSS 中的 CONTENT 标签来实现它。什么最适合你

【参考方案1】：

你可以把“|”轻松使用 UL LI

ul li 
  display: inline-block;


ul li:not(:last-child):after 
  content: "|";
  

<ul class="standard-nav visible-lg">
  <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a>
  </li>
  <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a>
  </li>
  <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a>
  </li>
  <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a>
  </li>
  <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a>
  </li>
  <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a>
  </li>

</ul>

【讨论】：

感谢您的回复。不幸的是，这不是我所期望的。我想自定义“|”的高度、填充、边距。我不能用你的解决方案。或者我可以吗？

这是我的荣幸 :)

【参考方案2】：

这可以使用border-right 轻松完成，如下所示：

.right_separator
  border-right: 1px solid;/*This will add a border for the right of the element*/
  padding-right: 3px;

<div class="tab-menu right_separator" id="tab" style="display: inline-block;">
  <a href="#">
    Home
  </a>
</div>


<div class="tab-menu right_separator" id="tab1" style="display: inline-block;">
  		<a href="#">
    Cart
  </a>
</div>


<div class="tab-menu right_separator" id="tab2" style="display: inline-block;">
  		<a href="#">
   Help
  </a>
</div>

<!-- Don't add .right_separator for the last element-->
<div class="tab-menu" id="tab3" style="display: inline-block;">
  		<a href="#">
   Contact
  </a>
</div>