Question

我在寻找什么

What I'm looking for /

我所拥有的：

What I've got

我想在导航栏中的链接之间加入小的垂直线条，以匹配的颜色均匀地隔开。以下是我编写的CSS代码。我是编码的新手，我已经搜索过Google，但仍然看到相同的答案，这让我有了这些我不想要的大字句。 ???

    /* GLOBAL */
    body {
        margin: 0 auto;
        background: grey;
        font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
        font-weight: 300;
    }


    /* NAVBAR */
    header {
        background: #ffffff;
        max-width: 100%;
        border-bottom: 2px solid #777777;
    }

    header::after {
        content: '';
        display: table;
        clear: both;
    }

    .container {
        margin: 0 auto;
        max-width: 960px;
    }

    .logo {
        float: left;
        background-color: #4aaaa5;
        color: #ffffff;
        margin: 0;
        padding: 20px 30px;
        display: inline-block;
        font-family: 'Georgia', Times, 'Times New Roman', serif;
    }

    nav {
        float: right;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav li {
        display: inline-block;
        padding-top: 30px;
        margin-left: 20px;
        **border-right: 1px solid #777777;**  
    }

    nav a {
        color: #777777;
        text-decoration: none;
    }

    nav li:last-of-type {
        **border-right: none;**
    } 

    nav a:hover {
        color: #4aaaa5;
    }

===========================================================================
 <body>
  <header>
   <div class="container">
    <h1 class="logo">Name</h1>
    <nav>
     <ul>
      <li><a class="active" href="about.html">About</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="content.html">Content</a></li>
     </ul>
    </nav>
   </div>
  </header>
 </body>

Answer 1

您可以考虑使用伪元素。这样就可以了。

看看这个

ul {
  list-style:none;
}
ul li{
  display:inline-block; 
  padding:0 7px; 
  position:relative;
}
ul li:not(:last-child)::after{
  content:""; 
  border:1px solid #e2e2e2;
  border-width: 1px 1px 0 0;
  position:absolute; 
  right:-3px; 
  top:0; 
  height:100%;
}

<ul>
  <li>Home</li>
  <li>Portfolio</li>
  <li>Contact</li>
</ul>

Answer 2

您可以使用右边框或下面的方法来做到这一点。

.nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: left;
}
.nav li{
    display: inline-block;
    position: relative;
    float: left;
    padding: 0 15px;
}
.nav li::after {
    position: absolute;
    width: 2px;
    right: 0;
    content: ' ';
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}
.nav li:last-child::after {
   width: 0;
}

<ul class="nav">
    <li><a href="#about">About</a></li>
    <li><a  href="#about">Home</a></li>
    <li><a  href="#about">Contact</a></li>
</ul>

Answer 3

将分隔符图像添加为li上的背景图像。

        public function getProductsWithGroup()
{

      $Products = Product::with('groups')->get();
     return $Products ;

}

Answer 4

尝试将border-right添加到每个li标签（最后一个li标签除外）。并将填充添加到每个li标签中。

像下面的代码

.nav li{
    border-right: 2px solid #c4c4c4;
    display: inline-block;
    float: left;
    padding: 0 15px;
}
.nav li:last-child {
    border-right:0;
}

下面是此处的完整工作演示。希望对您有帮助。

.nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: left;
}
.nav li{
    border-right: 2px solid #c4c4c4;
    display: inline-block;
    float: left;
    padding: 0 15px;
}
.nav li:last-child {
    border-right:0;
}

<ul class="nav">
    <li><a href="#about">About</a></li>
    <li><a  href="#about">Home</a></li>
    <li><a  href="#about">Contact</a></li>
</ul>

Answer 5

工作演示

<ul class="nav">
    <li><a href="#about">About</a></li>
    <li><a  href="#about">Home</a></li>
    <li><a  href="#about">Contact</a></li>
</ul>

.nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: left;
}
nav li {
    display: inline-block;
    padding-top: 30px;
    padding-left:10px
    padding-right:10px;
}
.nav li:after{
    content:'|';
    display:inline-block;
    color:#dddddd;
    vertical-align:middle;
}
.nav li:last-child:after {
     display:none;
}

如何在导航栏中的链接之间包含短垂直线？

5 个答案:

工作演示