水平導航欄將不會像頁面

Question

我的水平導航欄不會佔用整個屏幕，我不知道如何讓它做到這一點。 Here's what it looks like.此外，一旦它完成了，我希望圖像位於導航欄上方，而不是上方。任何幫助，將不勝感激。

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; 
 
} 
 

 
nav li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    padding: 1em; 
 
    background-color: aqua; 
 
    float: right; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: black; 
 
    padding: 1em; 
 
    font-size: 1.2em; 
 
} 
 

 
img#sushi {} 
 

 
nav ul { 
 

 
}

<a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi"></a> 
 
    <nav role="navigation"> 
 
    <ul> 
 
     <li><a href="">Home</a></li> 
 
     <li><a href="">About</a></li> 
 
     <li><a href="">Contact Us</a></li> 
 
    </ul> 
 
    </nav> 
 
</body>

Answer 1

添加到您的導航元素：

<nav id='header' role="navigation"> 

然後添加到您的CSS：

#header { 
width: 100%; 
height: 150px; //Whatever you want 
} 

Answer 2

嘗試移動浮動：直接從導航李書福nav like like

變化NAV李本..

nav li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 1em; 
    background-color: aqua; 
} 

，並添加導航這樣的..

nav { 
    float: right; 
} 

Answer 3

由於您的li元素是浮動的，你必須添加overflow: auto;到ul，使其包漂浮的li（否則它將有0px高度，因此不可見）。此外，您必須將背景顏色應用到ul：

nav li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    padding: 1em; 
 
    background-color: aqua; 
 
    float: right; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: black; 
 
    padding: 1em; 
 
    font-size: 1.2em; 
 
} 
 

 
img#sushi {} 
 

 
nav ul { 
 
    overflow: hidden; 
 
    background-color: aqua; 
 
}

<a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi"></a> 
 
<nav role="navigation"> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">About</a></li> 
 
    <li><a href="">Contact Us</a></li> 
 
    </ul> 
 
</nav>

PS：在你的問題的圖像鏈接指向一個頁面，顯示什麼...

Answer 4

此外，如果你不確定元素塊等，你可以隨時添加到你的CSS和測試：

* { 
    border: 1px solid red !important; 
} 

和示例喲ü可以看到這裏，https://jsfiddle.net/

有關問題的解決方案如下：

月1日：從nav li拿出display: inline-block;並移動到nav a

第二：移動IMG公司，UL

第三：ul背景顏色應該是aqua

/*CSS Reset*/ 
 

 
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; 
 
} 
 

 
nav li { 
 
    list-style-type: none; 
 
    padding: 1em; 
 
    background-color: aqua; 
 
    float: right; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: black; 
 
    padding: 1em; 
 
    font-size: 1.2em; 
 
\t \t display: inline-block; 
 
} 
 

 
img#sushi {} 
 

 
nav ul { 
 
\t background: aqua; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale:1.0"> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
 
</head> 
 

 
<body> 
 

 
    <nav role="navigation"> 
 
    <ul> 
 
     <a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi"></a> 
 
     <li><a href="">Home</a></li> 
 
     <li><a href="">About</a></li> 
 
     <li><a href="">Contact Us</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</body> 
 

 
</html>