Legen Sie eine Linie zwischen den verbindungen in den html navigation bar

In den untenstehenden html und css code, wie ich hinzufügen kann, separator oder-Linie zwischen zwei link-tag nicht nach dem link

sollte die Linie in der Mitte von zwei link-tag nicht nach element-Tags

CSS:

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

HTML:

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

InformationsquelleAutor mohsen.nour | 2015-04-04
  1. 1

    Wenn Sie wirklich wollen, ein symbol können Sie gehen, für so etwas, das erfordert ein bisschen mehr code: 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;
}
    • warum li die position muss relativ?
    • Otherwhise Sie können nicht die Position ein element absolut zu. Der Standardwert für die Elemente ist statisch, so dass Sie manuell zu ändern, um relative.
    InformationsquelleAutor Michelangelo
  2. 5

    Ich habe nur eine Zeile in der css li:

    border-right:solid 1px #fff;

    DEMO Dies ist der bessere Weg Hinzugefügt Trennlinie zwischen navbar links. Besseren Weg, dann Hinzugefügt | manuell nach jedem tag.

    Wenn Ihr Nav-Leiste decken eine komplette web-Seite, die Breite, die Sie vermeiden sollten Rechts-Grenze zum letzten element. Wie:

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

    Versuchen, diese ,

    border-right:1px solid #FFF

    Demo

    • Irgendwie slimier auf meine Antwort. 🙂 seltsam.
    InformationsquelleAutor Logz
  4. 0
    <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>
    InformationsquelleAutor khv2online
Schreibe einen Kommentar