<分区>
标签 css
<分区>
您好，我正在尝试在“主页”和“购物车”选项卡以及“帮助”和“联系方式”选项卡之间放置一条分割线。
.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 个像素。
最佳答案
你可以输入“|”轻松使用 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>关于css在两个div之间添加一条分割线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48382772/