css - 我将如何在同一行上使用 hr 设置导航样式

Question

好的，下面是我要实现的目标的表示和描述。

我试图在同一行上添加一个导航，但在一个 hr 标签之后，这样结果是这样的......

-------------------------------------------- ---------------------------- 首页 服务设施 关于联系方式

我能做的最好的事情是显示一个导航链接，但不会呈现其他导航链接

HTML

---

    <ul>

      <li class="active"><a href="index.php">HOME</a></li>

      <li><a href="index.php">SERVICES</a></li>

      <li><a href="index.php">FACILITIES</a></li>

      <li><a href="index.php">WITH US</a></li>

      <li><a href="index.php">CONTACT</a></li>

     </ul>

  </div>

CSS

body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.divider {
    margin-top: 100px;
    text-align: right;
    position: relative;
}

.divider hr {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.divider ul {
  float: right;
}
.divider li {
  float: left;
}
.divider a {
    position: absolute;
    right: 0px;
    top: 0px;
    text-decoration: none;
    color: #68C5DE;
    background: #fff;
    z-index: 10;
    padding: 2px 20px;
}

jsfiddle

我想我可能有太多或不够复杂的事情，但这让我挠头了 4 个小时。

是否有可能以一种仍能在小时上启用百分位数的方式实现这一点？

如有任何帮助，我们将不胜感激。

Answer 1

您已将所有链接放在彼此之上

.divider a {
position:absolute；
}