Navigationsmenü Rand

Question

Ich lerne CSS/HTML und ich habe ein Problem mit dem Erstellen eines Nav.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    margin: 0; 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>

Zwischen M ist Marge. Ich will es nicht. Ich habe versucht, sie zu entfernen, aber nichts.

Margin zwischen M

Wie kann ich es entfernen?

Answer 1

Ich denke, dass Sie etwas brauchen.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    padding: 15px 0; 
 

 
    display: inline-block; 
 
    margin: 0; 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    padding: 15px 20px; 
 

 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>

Answer 2

Lesen Sie die in den angegebenen Link Details, die CBroe geschrieben ... Werden Sie mit den Lösungen. Meiner Meinung nach sind sowohl die "flexbox" als auch die "Negative Margin" -Lösung ziemlich gute Tricks.

Hier gehen Sie:

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    margin-right: -4px; /* negative margin */ 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>