CSS導航 - 高亮顯示全寬

我希望我的導航background: rgba(0,0,0,.5)顯示爲全寬。CSS導航 - 高亮顯示全寬

我已將導航重新定位到右側。但是，頂部不透明的黑色背景未顯示在左側。請檢查這是什麼代碼的問題：

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

來源

2016-09-14 Jacob Rosta

把所有的在一個小提琴，我很樂意幫助你解決它（： –

編輯完成，請幫助 –

浮動會導致ul崩潰到其子元素的寬度，請從ul浮子改爲使用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>

來源

2016-09-14 11:03:09

哇這是working.Thank你了！ –

隨意。！點擊上/下箭頭下方的勾號標記，即可點擊此答案，如果它有幫助或將其標記爲已接受 –

你必須改變文本對齊浮動權。

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; 


}

來源

2016-09-14 11:08:33

CSS導航 - 高亮顯示全寬

回答

相關問題