Kleine Lücke in einem Menü, obwohl Rand und Padding 0

Question

Ich habe ein Problem: Ich möchte ein responsives Menü erstellen, aber im mobilen Modus gibt es so etwas wie margin-left und margin-top und ich weiß nicht, wie diese Lücken zu löschen. Hier ist mein Code:

body{ 
 
    font-family: "Verdana", Geneva, sans-serif; 
 
    background-color: white; 
 
    margin: 0px; 
 
    font-size: 100%; 
 
    -moz-hyphens: auto; 
 
    -o-hyphens: auto; 
 
    -webkit-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 

 
#main{ 
 
    max-width: 800px; 
 
    height: auto; 
 
    background-color:#FF9; 
 
    overflow: hidden; 
 
    margin: 0px auto; 
 
} 
 

 
#menu{ 
 
    width:20%; 
 
    background-color:#09F; 
 
    float: left; 
 
    text-align: center; 
 
    line-height: 20px; 
 
} 
 

 
#menu a { 
 
    text-decoration: none; 
 
    -webkit-transition: color .3s ease-in-out; 
 
    -moz-transition: color .3s ease-in-out; 
 
    -o-transition: color .3s ease-in-out; 
 
    -ms-transition: color .3s ease-in-out; 
 
    transition: color .3s ease-in-out; 
 
} 
 

 
#menu a:hover{ 
 
    color: red; 
 
    text-decoration:underline; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    #main{ 
 
    max-width: 800px; 
 
    height: auto; 
 
    left:0%; 
 
    margin:0px; 
 
    } 
 

 
    #menu{ 
 
    position:absolute; 
 
    display:block; 
 
    float:left; 
 
    width:100%; 
 
    background-color:green; 
 
    height: 60px; 
 
    padding:0px; 
 
    margin:0px; 
 
    left:0px; 
 
    top:0px; 
 
    } 
 

 
    #menu li{ 
 
    box-sizing: border-box; 
 
    position:relative; 
 
    list-style: none; 
 
    float: left; 
 
    cursor: pointer; 
 

 
    display: block; 
 
    width: 120px; 
 
    height:30px; 
 
    background-color:red; 
 

 
    } 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li><a href="#">Link1</a></li> 
 
    <li><a href="#">Link2</a></li> 
 
    <li><a href="#">Link3</a></li> 
 
    <li><a href="#">Link4</a></li> 
 
    <li><a href="#">Link5</a></li> 
 
    </ul> 
 
</nav>

Weiß jemand, wo ich einen Fehler gemacht?

Answer 1

ul hat voreingestellte Einzug Wert

ul{ 
    margin-left:20px; 
    } 

diesen Konflikt zu vermeiden, müssen Sie diesen Code schreiben, auf der Oberseite Ihr css

*{ 
    margin:0; 
    padding:0;// Padding also took some indent. You can use if it was requires 
} 

oder

ul{ 
    margin-left:0; 
    } 

Answer 2

Sie haben versucht, das Menü als Position: absolut und jeder li als relativ und machen sie als Anzeige: Block (float: links), müssen Sie das alles nicht tun. Float: links macht element display: block.

Statt dessen können Sie display: flex für das Layout anstelle von Floats verwenden.

Flexbox reagiert auch.

Überprüfung der folgenden Ausschnitt

body { 
 
    font-family: "Verdana", Geneva, sans-serif; 
 
    background-color: white; 
 
    margin: 0px; 
 
    font-size: 100%; 
 
    -moz-hyphens: auto; 
 
    -o-hyphens: auto; 
 
    -webkit-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 
#main { 
 
    max-width: 800px; 
 
    height: auto; 
 
    background-color: #FF9; 
 
    overflow: hidden; 
 
    margin: 0px auto; 
 
} 
 
#menu { 
 
    width: 20%; 
 
    background-color: #09F; 
 
    line-height: 20px; 
 
} 
 
#menu a { 
 
    text-decoration: none; 
 
    -webkit-transition: color .3s ease-in-out; 
 
    -moz-transition: color .3s ease-in-out; 
 
    -o-transition: color .3s ease-in-out; 
 
    -ms-transition: color .3s ease-in-out; 
 
    transition: color .3s ease-in-out; 
 
} 
 
#menu a:hover { 
 
    color: red; 
 
    text-decoration: underline; 
 
} 
 
@media screen and (max-width: 800px) { 
 
    #main { 
 
    max-width: 800px; 
 
    height: auto; 
 
    left: 0%; 
 
    margin: 0px; 
 
    } 
 
    #menu { 
 
    width: 100%; 
 
    background-color: green; 
 
    height: 60px; 
 
    padding: 10px; 
 
    margin: 0px; 
 
    position: relative; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    #menu ul { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    } 
 
    #menu li { 
 
    list-style: none; 
 
    cursor: pointer; 
 
    background-color: red; 
 
    }

<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <link href="css/mobile.css" rel="stylesheet" type "text/css"> 
 
</head> 
 

 
<body> 
 
    <nav id="menu"> 
 
    <ul> 
 
     <li><a href="#">Link1</a> 
 
     </li> 
 
     <li><a href="#">Link2</a> 
 
     </li> 
 
     <li><a href="#">Link3</a> 
 
     </li> 
 
     <li><a href="#">Link4</a> 
 
     </li> 
 
     <li><a href="#">Link5</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

Answer 3

Ich bin mir nicht sicher, ob ich das richtig verstanden, aber vielleicht ist es das, was Sie suchen:

#menu ul { 
    margin: 0px; 
    padding-left: 0px; 
} 

Answer 4

Es gibt eine gute Chance, was Sie sehen, ist das Standard-Stylesheet im Browser eingebettet. Normalerweise sollten Sie Ihre Stylesheets zurücksetzen, indem Sie diese am Anfang Ihrer CSS-Datei verwenden. Dadurch werden alle vordefinierten Polsterungen/Margen usw. zu 0.

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/*============ END OF RESET =================*/ 

Ich habe das Gefühl, das zu Ihrem Problem zusammenhängt. Es lohnt sich, es auszuprobieren.

Answer 5

könnten Sie auch Geige verwenden Flexbox sehen https://jsfiddle.net/f76vdyxe/

body{ 
 
    font-family: "Verdana", Geneva, sans-serif; 
 
    background-color: white; 
 
    margin: 0px; 
 
    font-size: 100%; 
 
    -moz-hyphens: auto; 
 
    -o-hyphens: auto; 
 
    -webkit-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 

 
#main{ 
 
    max-width: 800px; 
 
    height: auto; 
 
    background-color:#FF9; 
 
    overflow: hidden; 
 
    margin: 0px auto; 
 
} 
 

 
#menu{ 
 
    width:20%; 
 
    background-color:#09F; 
 
    float: left; 
 
    text-align: center; 
 
    line-height: 20px; 
 
} 
 

 
#menu a { 
 
    text-decoration: none; 
 
    -webkit-transition: color .3s ease-in-out; 
 
    -moz-transition: color .3s ease-in-out; 
 
    -o-transition: color .3s ease-in-out; 
 
    -ms-transition: color .3s ease-in-out; 
 
    transition: color .3s ease-in-out; 
 
} 
 

 
#menu a:hover{ 
 
    color: red; 
 
    text-decoration:underline; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    nav ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    } 
 
#main{ 
 
    max-width: 800px; 
 
    height: auto; 
 
    left:0%; 
 
    margin:0px; 
 
} 
 

 
#menu{ 
 
    position:absolute; 
 
    display:block; 
 
    float:left; 
 
    width:100%; 
 
    background-color:green; 
 
    padding:0px; 
 
    margin:0px; 
 
    left:0px; 
 
    top:0px; 
 
} 
 

 
#menu li{ 
 
    box-sizing: border-box; 
 
    position:relative; 
 
    list-style: none; 
 
    float: left; 
 
    cursor: pointer; 
 

 
    display: block; 
 
    background-color:red; 
 
    
 
    flex: 1; 
 

 
} 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li><a href="#">Link1</a></li> 
 
    <li><a href="#">Link2</a></li> 
 
    <li><a href="#">Link3</a></li> 
 
    <li><a href="#">Link4</a></li> 
 
    <li><a href="#">Link5</a></li> 
 
    </ul> 
 
</nav>