如何在导航栏的两侧制作两条线？答案

【问题标题】：How to make two lines on either side of the navigation bar?如何在导航栏的两侧制作两条线？
【发布时间】：2021-10-02 06:46:45
【问题描述】：

我希望导航栏看起来像这样，在导航栏的两侧各有两条水平线。 html代码：

    <div id="navbar">
    <div id="navbar-links">
    <a class="active" href="#home">HOME</a>
    <a href="#about">ABOUT</a>
    <a href="#works">WORKS</a>
    <a href="#contact">CONTACT</a>
    </div>
    </div>

【问题讨论】：

请向我们展示相关的 CSS - 例如导航栏是如何居中的？

标签： html css navbar

【解决方案1】：

取决于周围的 CSS 到底是什么，但只给出问题中的 HTML，您可以使用线性渐变将一条线作为整个导航栏的背景，并在实际链接下通过给它一个白色来将其空白背景。

#navbar {
  background-image: linear-gradient(transparent 0 49%, blue 49% 51%, transparent 51% 100%);
  position: relative;
  rdisplay: inline-block;
  margin: 0 1vw;
  display: flex;
  justify-content: center;
}

#navbar-links {
  background: white;
  padding: 0 2vw;
}

#navbar-links a{
  color: gray;
  text-decoration: none;
}

<div id="navbar">
  <div id="navbar-links">
    <a class="active" href="#home">HOME</a>
    <a href="#about">ABOUT</a>
    <a href="#works">WORKS</a>
    <a href="#contact">CONTACT</a>
  </div>
</div>

您需要使用填充或边距来获得所需的间距。

【讨论】：

如何只为水平线添加更多的填充？
您想让蓝线看起来更短吗？在两侧或只是中间部分或最左边和最右边？尝试更改导航栏链接的填充以在链接的任一侧获得更多填充。
是的。我想要两条短线。
厚度更大
厚度由线性渐变中的 %s 控制。给蓝色部分更多的百分比，比如 47% 53%

【解决方案2】：

我不确定您到底想要什么，但我尝试使用您提供的 html 来跟踪图像。此方法使用两个跨度，一个在链接之前，一个在链接之后。您可以随意调整线条的字体大小和大小/颜色。

如果您使用的是 Bootstrap，这会有所不同。

.left, .right{
  flex-grow: 1;
  background: linear-gradient(lightskyblue, lightskyblue);
  background-position: 0% 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}


#navbar-links>a{
  color:black;
  float: left;
  text-decoration: none;
  width: 25%; 
  text-align: center;
}

    <div id="navbar" style="width:95%;display: flex;margin: 40px auto;">
        <span class='left'></span> 
      <div id="navbar-links" style="width:65%; padding: 0 5px">
      <a class="active" href="#home">HOME</a>
      <a href="#about">ABOUT</a>
      <a href="#works">WORKS</a>
      <a href="#contact">CONTACT</a>
      </div>
          <span class='right'></span>
      </div>
    </h3>

【讨论】：

谢谢。有效。我必须用我的 css 试试这个