Question

您好我试图在标签＆＃34; Home＆＃34;之间插入分界线。和＆＃34;购物车＆＃34;选项卡＆＃34;帮助＆＃34;和＆＃34;联系＆＃34;。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我尝试通过显示div选项卡周围div的右边框来实现。但我有一个问题，我不能按照自己的意愿移动分界线。我希望它不会那么高，但如果我设置一个上限，它不起作用，它将移动每个标签。

所以我想要的是分割线要低一点，可能低2个像素。

Answer 1

你可以把＆＃34; |＆＃34;很容易与UL LI

＆＃13;

ul li {
  display: inline-block;
}

ul li:not(:last-child):after {
  content: "|";
  }

＆＃13;

<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>

＆＃13;

Answer 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>

css在两个div之间添加一条分界线

2 个答案: