How to create dividing lines in Navigation

Rifta 0
Viewed 15

I'm trying to build a navigation bar with dividing lines between each category. Why do the lines not extend to the left end of the navigation bar? I tried "hr" tags, creating lines with div-tags (width: 100% too) and reducing the margin but nothing seems to work.

Here is my code:

#navbar{
    width: 10vw;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

nav > ul{
    list-style-type: none;
    border-bottom: 3px solid;
    border-top: 3px solid;
}

nav > ul > li{
    border-bottom: 5px solid;
}
    <nav id="navbar">
        <ul>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
        </ul>
    </nav>

This is the Problem:

enter image description here

css html
1 Answers

Unordered list items (UL) have a default padding. You can set it to 0, then give your list item (LI) a padding on the left to push it over.

#navbar{
    width: 10vw;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

nav > ul{
    list-style-type: none;
    border-bottom: 3px solid;
    border-top: 3px solid;
    padding:0;
}

nav > ul > li{
    border-bottom: 5px solid;
    padding-left:20px;
}
<nav id="navbar">
        <ul>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
            <li>A</li><hr>
        </ul>
    </nav>

imvain20
Related