水平导航栏将不会像页面

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>