如何在同一行使用 hr 设置导航样式答案

【问题标题】：how would I style navigation with hr on the same line如何在同一行使用 hr 设置导航样式
【发布时间】：2014-08-30 13:33:49
【问题描述】：

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

我正在尝试在同一行添加导航，但在 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 个小时。

这是否有可能以仍然启用 hr 百分位数的方式实现？

任何帮助将不胜感激。

【问题讨论】：

标签： css navigation nav

【解决方案1】：

您已将所有链接放在彼此的顶部

.divider a { position: absolute; }

【讨论】：

"[It] 通常的做法是使用标签来表示它们的用途" - 你可能想澄清你的意思，我不确定我明白什么你想说。
感谢 Lukadante3，这是我的一个过度网站。现在都整理好了。不确定您所说的“您不应该将
标签用于此类事情。最好将标签用于它们的用途。”

【解决方案2】：

如果背景不是问题，那么您可以使用伪元素 :before 创建行，然后让列表项与白色背景颜色重叠以隐藏它。

HTML

<div class="nav-wrapper">
  <ul class="navigation">
    <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;
}

.nav-wrapper { margin-top: 50px; overflow: hidden; position: relative; }
.navigation {
  float: right;
  margin: 0;
  padding: 0;
}
.navigation:before {
    border: solid 1px #000;
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    top: 0.5em;
    width: 100%;
}
.navigation li {
  background-color: #fff;
  float: left;
  height: 1em;
  line-height: 1em;
  list-style-type: none;
  margin: 0;
  padding: 0 5px;
  position: relative;
}

jsfiddle

【讨论】：

谢谢李，这本来可以解决问题的，但我应该提到 hr 在两端都有渐变，所以我不能真正使用这种方法。