时间戳

首页 > 解决方案 > 在引导程序 4 中的列表项之间添加一些空格和边框

html - 在引导程序 4 中的列表项之间添加一些空格和边框

问题描述

在我的标题中，我有一些链接，我想在它们之间添加一些空格和边框。

我尝试使用 ::before 伪添加内容，但它没有将内容放到我想要的位置。

.header_links_ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header_links_ul li a {
  color: #000;
  font-size: 12px;
  display: block;
}

@media (min-width:992px) {
  .header_links_ul li+li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 8px;
    margin-top: -4px;
    background: #ff0000;
    content: '';
  }
}
<div class="row">
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
      <li><a href="#">Vásárlási információk</a></li>
      <li><a href="#">Szállítás</a></li>
      <li><a href="#">Kapcsolat</a></li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_right d-flex justify-content-center justify-content-md-end">
      <li><a href="#">Regisztráció</a></li>
      <li><a href="#">Bejelentkezés</a></li>
    </ul>
  </div>
  <div class="clearfix"></div>
</div>

我现在得到的结果，以及我想要的，我在照片上展示了它。 照片，点这里

标签： htmlcssbootstrap-4

解决方案

您可以使用以下代码。附加链接

.header_links_ul li{
  padding: 0px 20px;
  border-right:1px solid #000;
}
.header_links_ul li:last-child{
  padding: 0px 20px;
  border-right:none;
}

推荐阅读