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个小时。

这是否有可能以一种仍然能够在hr上实现百分位数的方式实现这一目标？

非常感谢任何帮助。

Answer 1

您已使用

将所有链接置于彼此之上

.divider a { position: absolute; }

Answer 2

如果背景不是问题，那么您可以使用伪元素：在创建线之前，让列表项与白色背景颜色重叠以隐藏它。

<强> 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定制导航样式

2 个答案: