Wie lege ich ein Menü über die gesamte Breite der Seite mit HTML und CSS?

Ich habe gerade mit der Websprache debütiert (HTML, CSS) und ich erstelle meine erste Seite. Ich finde ein horizontales HTML-Template-Menü, das ich auf meine Seite anwenden möchte. Leider komme ich nicht, um es zu ändern, weil er auf die ganze Breite meiner Seite zutrifft.Wie lege ich ein Menü über die gesamte Breite der Seite mit HTML und CSS?

Ich erkunde das Netz, um zu versuchen, wie zu tun, und ich denke, es sollte mit der Eigenschaft width = 100% verknüpft werden.

Ich denke, die Lösung sollte einfach sein, aber sogar die StackOverflow Post auf ähnliche Probleme habe ich nicht gefunden. Wenn ich die in meinem Code gefundenen Lösungen anwende, funktioniert es nicht. Hier

ist der Code:

body 
 
{ 
 
background-color: black; /* Le fond de la page sera noir */ 
 
} 
 

 
#nav 
 
{ 
 
padding:0; 
 
} 
 

 
#nav li 
 
{ 
 
display:inline; 
 
} 
 

 
#nav li a 
 
{ 
 
font-family:Arial; 
 
font-size:12px; 
 
text-decoration: none; 
 
float:left; 
 
padding:10px; 
 
background-color: #333333; 
 
color:#ffffff; 
 
border-bottom:1px; 
 
border-bottom-color:#000000; 
 
border-bottom-style:solid; 
 
} 
 

 
#nav li a:hover 
 
{ 
 
background-color:#9B1C26; 
 
padding-bottom:12px; 
 
border-bottom:2px; 
 
border-bottom-color:#000000; 
 
border-bottom-style:solid; 
 
margin:-1px; 
 
}

<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
\t <link rel="stylesheet" href="menuStyle.css" /> 
 
    <title>Antoine</title> 
 
</head> 
 
<body> 
 
    
 
\t <ul id="nav" style="clear:both;"> 
 
\t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t <li><a href="#">About</a></li> 
 
\t \t \t <li><a href="#">Services</a></li> 
 
\t \t \t <li><a href="#">Products</a></li> 
 
\t \t \t <li><a href="#">Sitemap</a></li> 
 
\t \t \t <li><a href="#">Help</a></li> 
 
\t \t \t <li><a href="#">Contact Us</a></li> 
 
\t </ul> 
 
</body> 
 
</html>

Quelle

2016-05-25 millet antoine

Sie können Ihre ul (#nav ID) als inline-block und dann Einstellung width: 100%. auch tun anzeigt, sollten Sie einen background-color fügen Sie den Effekt zu sehen.

body 
 
{ 
 
background-color: black; /* Le fond de la page sera noir */ 
 
} 
 

 
#nav 
 
{ 
 
padding:0; 
 
display: inline-block; 
 
width: 100%; 
 
background-color: #333333; 
 
} 
 

 
#nav li 
 
{ 
 
display:inline; 
 
} 
 

 
#nav li a 
 
{ 
 
font-family:Arial; 
 
font-size:12px; 
 
text-decoration: none; 
 
float:left; 
 
padding:10px; 
 
background-color: #333333; 
 
color:#ffffff; 
 
border-bottom:1px; 
 
border-bottom-color:#000000; 
 
border-bottom-style:solid; 
 
} 
 

 
#nav li a:hover 
 
{ 
 
background-color:#9B1C26; 
 
padding-bottom:12px; 
 
border-bottom:2px; 
 
border-bottom-color:#000000; 
 
border-bottom-style:solid; 
 
margin:-1px; 
 
}

<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
\t <link rel="stylesheet" href="menuStyle.css" /> 
 
    <title>Antoine</title> 
 
</head> 
 
<body> 
 
    
 
\t <ul id="nav" style="clear:both;"> 
 
\t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t <li><a href="#">About</a></li> 
 
\t \t \t <li><a href="#">Services</a></li> 
 
\t \t \t <li><a href="#">Products</a></li> 
 
\t \t \t <li><a href="#">Sitemap</a></li> 
 
\t \t \t <li><a href="#">Help</a></li> 
 
\t \t \t <li><a href="#">Contact Us</a></li> 
 
\t </ul> 
 
</body> 
 
</html>

Quelle

2016-05-25 12:26:22

Es funktioniert perfekt, danke auch für die Geschwindigkeit und Qualität Ihrer Antwort. –

Ich glaube, Sie diese hinzufügen sollten, wenn Sie Ihr Menü wie 100% Breite Ihrer Seite zu sein.

#nav 
{ 
padding:0; 
width: 100%; 
float:left; 
background-color: #333333; 
}

background-color: # 333333 - Added nur um es mehr sichtbar.

Quelle

2016-05-25 12:21:46 JustinasT

Es funktioniert perfekt danke. –

Ich empfehle Ihnen, Bootstrap zu lernen und zu verwenden, weil es das einfach macht. In Ihrem Fall ist es sehr einfach, Sie werden 2 <div> Elemente außerhalb Ihrer navbar erstellen. Eine, um die Breite 100% und wenden Sie Ihren Hintergrund und dann eine andere, um Ihren Code zu zentralisieren.

Meine Antwort auf Ihre Frage:

<style> 
.full_width{ 
    width: 100%; 
} 
.centerlize{ 
    width:1024px; 
    margin: 20px auto; 
} 
</style> 
<body> 
    <div class="full_width"> 
     <div class="centerlize"> 
      <ul id="nav" style="clear:both;"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Products</a></li> 
       <li><a href="#">Sitemap</a></li> 
       <li><a href="#">Help</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
     </div> 
    </div> 
</body>

Quelle

2016-05-25 12:25:02

Raten Sie keine Leute, die HTML und CSS programmieren, um Bootstrap zu verwenden - es wird nur das Lernen einschränken, das sie machen. Die Verwendung für die Produktion liegt bei Ihnen, die Verwendung von HTML und CSS ist ** nicht **. – Randy

body { 
 
    background-color: white; 
 
    /* Le fond de la page sera noir */ 
 
} 
 
#nav { 
 
    /* reset unordered list to not use default list styles */ 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* add display flex with space around and vertical centering...also stop wrap */ 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: no-wrap; 
 
    /* color needed on background also to look consistent */ 
 
    background-color: #333333; 
 
} 
 
#nav li a { 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    float: left; 
 
    padding: 10px; 
 
    color: #ffffff; 
 
    border-bottom: 2px; 
 
    border-bottom-color: transparent; 
 
    border-bottom-style: solid; 
 
} 
 
#nav li a:hover { 
 
    /* avoid changing size or position of things on hover...this can cause content to jump */ 
 
    background-color: #9B1C26; 
 
    border-bottom-color: #000000; 
 
}

<ul id="nav" style="clear:both;"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Services</a> 
 
    </li> 
 
    <li><a href="#">Products</a> 
 
    </li> 
 
    <li><a href="#">Sitemap</a> 
 
    </li> 
 
    <li><a href="#">Help</a> 
 
    </li> 
 
    <li><a href="#">Contact Us</a> 
 
    </li> 
 
</ul>

Dies ist nur ein Beispiel dafür, was man tun kann, schon gar nicht die Standard-Gold, sondern werden Sie über die Möglichkeiten zu denken bekommen. Hoffe das hilft. Das CSS wurde mit Änderungen kommentiert.

Quelle

2016-05-25 12:31:34 orangeh0g

Danke, du hast mir geholfen, was ich als nächstes machen wollte. –

Probieren Sie die Menüliste in ein DIV wie diese tp setzen:

für die Geschwindigkeit und die Qualität Ihrer Antwort

body 
 
{ 
 
background-color: black; /* Le fond de la page sera noir */ 
 
} 
 
#navdiv 
 
{ 
 
\t padding 0; 
 
\t background-color: #333333; 
 
\t width: 100vw; 
 
\t height: 34px; 
 
} 
 
#navul 
 
{ 
 
padding:0; 
 
width: 100vW; 
 
} 
 

 
#navul li 
 
{ 
 
display:inline; 
 
} 
 

 
#navul li a 
 
{ 
 
font-family:Arial; 
 
font-size:12px; 
 
text-decoration: none; 
 
float:left; 
 
padding:10px; 
 
background-color: #333333; 
 
color:#ffffff; 
 
border-bottom:1px; 
 
border-bottom-color:#000000; 
 
border-bottom-style:solid; 
 
} 
 

 
#navul li a:hover 
 
{ 
 
background-color:#9B1C26; 
 
padding-bottom:12px; 
 
border-bottom:2px; 
 
border-bottom-color:#000000; 
 
border-bottom-style:solid; 
 
margin:-1px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="menuStyle.css" /> 
 
    <title>Antoine</title> 
 
</head> 
 
<body> 
 

 
    <div id="navdiv"> 
 
\t <ul id="navul" style="clear:both;"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Products</a></li> 
 
      <li><a href="#">Sitemap</a></li> 
 
      <li><a href="#">Help</a></li> 
 
      <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2016-05-25 12:39:32

Wie lege ich ein Menü über die gesamte Breite der Seite mit HTML und CSS?

Antwort

Verwandte Themen