如何处理我的导航栏以使其看起来像图片？答案

【问题标题】：What to do with my navigation bar to make it look like in the picture?如何处理我的导航栏以使其看起来像图片？
【发布时间】：2016-03-31 01:02:42
【问题描述】：

我必须准确地创建一个导航栏，如下图所示。我尝试了一整天。您可以在下面看到我可以编写的唯一代码。问题是我使用了这里的方法：Separators For Navigation，但我不知道如何放置链接和边框以使其看起来像图片中的那样。导航栏下方的橙色线不属于它。我有一个 PSD Photoshop 文件，我可以从中提取导航栏的元素。这就是 nav_border.png 的来源。

target navigation bar image

my result

我的 HTML 代码：

<div id="navbar">
    <ul>
        <li><a href="index.html">First time at auction ?</a></li>
        <li><a href="index.html">Next auctions</a></li>
        <li><a href="index.html">Rules</a></li>
        <li><a href="index.html">Terms of use</a></li>
        <li><a href="index.html">FAQ</a></li>
        <li><a href="index.html">Contacts</a></li>
        <li></li>
    </ul>
  </div>

我的 CSS 代码（到目前为止）：

#navbar {
    float: left;
    width: 776px;
    height: 40px;
    border-radius: 8px 8px 0 0;
    background-color: #003366;
}
#navbar ul {
    list-style-type: none;
}
#navbar li {
    float: left;
}
#navbar a {
    color: white;
    text-decoration: none;
}
#navbar li + li{
    background:url('nav_border.png') no-repeat top left;
    padding-left: 10px;
    margin-left: 30px;
}

【问题讨论】：

标签： html css list border navigationbar

【解决方案1】：

这是一个能让你朝着正确方向前进的小提琴

https://jsfiddle.net/fx6gtj6o/

#navbar {

  background: blue;
  border-radius: 8px 8px 0 0;  

  ul {

    list-item-type: none;
    padding: 0;

    li {

      display: inline-block;
      text-align: center;
      padding: 10px 10px;
      border-right: 1px solid black;

      a {

        color: #FFF;

      }

    }

  }

}

没有理由使用实际模型中的任何图像，您可以使用 CSS 完成所有工作

【讨论】：

谢谢！现在它的位置很完美。您还知道如何将右边框更改为图像边框吗？我尝试了在线边框生成器，但使用代码后边框就消失了。
jsfiddle.net/fx6gtj6o/1 是一个带有渐变边框的更新小提琴