Navigationsleiste nicht vollständig füllen-Bildschirm Breite
Habe ich angefangen, eine Navigationsleiste mit den nav-tag, das funktionierte perfekt. Mit CSS, habe ich die Breite meiner nav-tag auf 100%, ebenso wie die Grenze und padding auf 0 gesetzt.
Habe ich anscheinend ein paar Pixel auf jeder Seite von der nav-bar, die nicht immer gefüllt. Ich möchte die gesamte Breite abgedeckt werden mit dem nav-bar, aber ich kann nicht ankommen es zu wirken. Hier ist mein html:
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li>
<a href="test1.html">Test1 <span class="carrot"></span></a>
<div>
<ul>
<li><a href="test#testA">TestA</a></li>
<li><a href="test.html#B">TestB</a></li>
<li><a href="teset.C">TestC</a></li>
</ul>
</div>
</li>
<li><a href="test2.html">Test2</a></li>
<li><a href="test3.html">Test3</a></li>
</ul>
</nav>
Css:
nav {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
display: block;
margin: 8px 22px 8px 22px;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
Was kann ich tun um dies zu beheben?
nav { margin: 0; padding: 0;}
body { margin: 0; padding: 0; }
- Jetzt gibt es einen 1px Rand der weißen Raum auf der oben auf meiner Website. Ist es aufgrund der Elemente in der nav-bar vielleicht?
- Ich bin ein idiot, das ist Google Chrome.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Set body margin 0
CSS
Alle HTML-Dokument standardmäßig ein margin umliegenden allen vier Ecken. Als wünschenswert, und die Margen sind in den meisten Fällen, manchmal sind Sie mit Ihrem design, wie eine Kopfzeile, die sich über die gesamte Seite horizontal. In diesem Fall müssen Sie explizit zuweisen 0 zu den Seitenrändern des Körpers.
Erläuterung der Antwort @Luis P. A
Starten alle Projekte mit der folgenden CSS-Regel:
Alle Browser haben einige Standard-css-Regeln. Mit dieser css-Regel ich werde es zurücksetzen der browser-Standard-css -...
Verwenden Sie immer auf Ihrem css-stylesheet docs diese ersten Zeilen:
Können Sie beseitigen presets auf Browsern, die von "Normalisierung", füge einfach diesen link in den Kopf:
"https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"
Fügen Sie auch die CSS:
Ich weiß nicht, wie zu verwenden Markdown noch, wenn das hier gefragt..