Question

我的水平导航栏不会占据整个屏幕，我不知道如何做到这一点。 Here's what it looks like. 此外，一旦完成，我希望图片位于导航栏的顶部，而不是在其上方。任何帮助将不胜感激。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

由于您的li元素已浮动，因此您必须将overflow: auto;添加到ul，以便它将包装浮动的li（否则它将具有0px高度）因此不可见）。此外，您必须将背景颜色应用于ul：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

将此添加到导航元素：

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

然后将此添加到您的css：

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

Answer 3

尝试移动浮动：从导航li直接导航到下面的导航

将nav li改为此..

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

并像这样添加导航..

nav {
    float: right;
}

Answer 4

此外，如果您不确定元素块等，您可以随时将其添加到您的CSS并测试：

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

您可以在此处看到示例，https://jsfiddle.net/

针对您的问题，解决方案如下：

1st：从display: inline-block;取出nav li并转到nav a

第二名：将img移至ul

第三：ul的背景颜色应该是aqua

＆＃13;

/*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;
		display: inline-block;
}

img#sushi {}

nav ul {
	background: aqua;
}

＆＃13;

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

＆＃13;

水平导航栏不会与页面

4 个答案: