html - 水平导航栏不会和页面一样长

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

由于您的 li 元素是 float 的，您必须将 overflow: auto; 添加到 ul 以便它包裹 float 的 li s(否则它将有 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>

P.S.:您问题中的图片链接指向一个没有显示任何内容的页面......