在 html 导航栏中的链接之间放一条线

Question

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

之后

<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>

 <!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>

Answer 1

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

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 导航栏中的链接之间放一条线

Put a line between links in html navigation bar

html

css

hyperlink

navbar