CSS Navigation - volle Breite markieren

Ich möchte, dass meine Navigation background: rgba(0,0,0,.5) in voller Breite angezeigt wird.CSS Navigation - volle Breite markieren

Ich habe die Navigation auf der rechten Seite neu positionieren. Der schwarze Hintergrund mit Deckkraft oben wird jedoch nicht auf der linken Seite angezeigt. Bitte überprüfen Sie, was das Problem dieses Codes ist:

body { 
 
    font-size: 1em; 
 
    font-family: sans-serif; 
 
    color: #000000; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    margin-bottom: 10px; 
 
} 
 
nav { 
 
    background: rgba(0, 0, 0, .5); 
 
} 
 
nav > ul { 
 
    float: right; 
 
    background: rgba(0, 0, 0, .5); 
 
} 
 
nav ul > li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 10px; 
 
} 
 
nav ul li:hover { 
 
    background-color: #587058; 
 
} 
 
nav ul li > a { 
 
    text-decoration: none; 
 
    color: #ffd800; 
 
} 
 
nav ul::after { 
 
    content: ''; 
 
    display: block; 
 
    clear: right; 
 
} 
 
header { 
 
    height: 500px; 
 
    background: url("1.jpg") no-repeat center; 
 
    background-size: cover; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>CSS Menus</title> 
 
    <link rel="stylesheet" type="text/css" href="assets/menus1.css"> 
 
</head> 
 

 
<body> 
 
    <header id="the_header"> 
 
    <a class="logo" href="#"></a> 
 
    <nav id="the_nav"> 
 
     <ul> 
 
     <li><a href="">Home</a> 
 
     </li> 
 
     <li><a href="">Skills</a> 
 
     </li> 
 
     <li><a href="" aria-haspopup="true">Projects</a> 
 
     </li> 
 
     <li><a href="">Contact Me</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</body> 
 

 
</html>

enter image description here

Quelle

2016-09-14 Jacob Rosta

all das in einer Geige Put und ich würde gerne Sie das Problem beheben helfen. (: –

Bearbeitung Geschehen bitte helfen –

Schwimm die ul verursachen auf die Breite ihrer untergeordneten Elemente kollabieren, so der Schwimmer aus dem ul entfernen und Verwenden Sie stattdessen text-align:right.

body { 
 
    font-size: 1em; 
 
    font-family: sans-serif; 
 
    color: #000000; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    margin-bottom: 10px; 
 
} 
 
nav { 
 
    background: rgba(0, 0, 0, .5); 
 
} 
 
nav > ul { 
 
    text-align: right; 
 
    background: rgba(0, 0, 0, .5); 
 
} 
 
nav ul > li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 10px; 
 
} 
 
nav ul li:hover { 
 
    background-color: #587058; 
 
} 
 
nav ul li > a { 
 
    text-decoration: none; 
 
    color: #ffd800; 
 
} 
 
nav ul::after { 
 
    content: ''; 
 
    display: block; 
 
    clear: right; 
 
} 
 
header { 
 
    height: 500px; 
 
    background: url("1.jpg") no-repeat center; 
 
    background-size: cover; 
 
}

<header id="the_header"> 
 
    <a class="logo" href="#"></a> 
 
    <nav id="the_nav"> 
 
    <ul> 
 
     <li><a href="">Home</a> 
 
     </li> 
 
     <li><a href="">Skills</a> 
 
     </li> 
 
     <li><a href="" aria-haspopup="true">Projects</a> 
 
     </li> 
 
     <li><a href="">Contact Me</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

Quelle

2016-09-14 11:03:09

Wow, es ist working.Thank you very much !!! –

Sek.! Upvote diese Antwort, wenn es geholfen hat oder markieren Sie es als akzeptiert, indem Sie auf das Häkchen unter den Auf/Ab-Pfeilen klicken –

Sie haben Schwimmer Recht zu ändern, um Text-align.

body { 
    font-size: 1em; 
    font-family: sans-serif; 
    color: #000000; 
    margin: 0; 
    padding: 0; 
} 

h1 { 
    margin-bottom: 10px; 
} 

nav { 
    background: rgba(0,0,0,.5); 
} 

nav > ul { 
    text-align:right; /*change*/ 
    background: rgba(0,0,0,.5); 
} 

nav ul > li { 
     display: inline-block; 
     padding: 10px; 
     margin: 10px; 
} 

nav ul li:hover { 
     background-color: #587058; 
} 

nav ul li > a{ 
    text-decoration: none; 
    color: #ffd800; 
} 

nav ul::after { 
    content:''; 
    display: block; 
    clear: right; 
} 

header { 
    height: 500px; 
    background: url("1.jpg") no-repeat center; 
    background-size: cover; 


}

Quelle

2016-09-14 11:08:33

CSS Navigation - volle Breite markieren

Antwort

Verwandte Themen