Question

在下面的html和css代码中，如何在链接之后不在链接标记之间添加分隔符或行该行应位于两个链接标记的中间，而不是在元素标记

之后

＆＃13;

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}
</style>

＆＃13;

	<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#home">Home |</a></li>
  <li><a href="#news">News |</a></li>
  <li><a href="#contact">Contact |</a></li>
  <li><a href="#about">About |</a></li>
</ul>

</body>
</html>

＆＃13;

Answer 1

我在你的css中添加了一行：

border-right:solid 1px #fff;

DEMO这是在导航栏链接之间添加分隔线的更好方法。然后更好的方法是在任何标记之后手动添加|。

当您的导航栏将覆盖完整的网页宽度时，您应该避免使用右边框到最后一个元素。像：

li:not(:last-child) { 
    border-right:solid 1px #fff;/* This will not give border to last li element */
}

Answer 2

试试这个，

border-right:1px solid #FFF

<强> Demo

Answer 3

如果你真的想要一个符号，你可以选择这样的东西，这需要更多的代码：fiddle

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
    position:relative;
}

.divider {
    position: absolute;
    right:-1px;
    top:2px;
}


a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}

Answer 4

<html>

<head>
    <style>
    .yourNav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .yourNav li {
        float: left;
    }

    .yourNav a{
        position: relative;
    }

    .yourNav a:after{
        position: absolute;
        right: -1px;
        top: 3px;
        bottom: 3px;
        width: 3px;
        background: #fff;
        content: "";
    }

    .yourNav li:last-child a:after{
        display: none;
    }

    .yourNav a:link,
    .yourNav a:visited {
        display: block;
        width: 120px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #98bf21;
        text-align: center;
        padding: 4px;
        text-decoration: none;
        text-transform: uppercase;
    }

    a:hover,
    a:active {
        background-color: #7A991A;
    }
    </style>
</head>

<body>
    <ul class="yourNav">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <script type="text/javascript">
    </script>
</body>

</html>

在html导航栏中的链接之间添加一行

4 个答案: