HTML

Question

您好我正在尝试建立一个网站，但我的菜单栏没有做它应该做的事情。它应该是这样的： http://i.stack.imgur.com/KDvwo.png

但它看起来像这样： http://i.stack.imgur.com/Y1Ya8.png

这是我的代码：

HTML

<div class="wrapper">
<header>
<h1>Colve</h1></div>
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>    
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h1>About-Colve</h1>
<p>Colve is a company that gives you the things you want in one place</p>
<p>Created by Bradley Beeke</p>
</section>
</div>

CSS

html {
font:12pt Lato, sans-serif;
min-height:100%;
background-image:linear-gradient(45deg,#3498db,#2ecc71);
}
body{margin:0px;}

header{
background-color:white;
Color: #FFDF00;
float:left;
padding-left:5px;
display:block;


}
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:100%;
float:right;

}
nav a   {
text-decoration:none;
list-style:none;
color:#FFDF00;
font-size:20px;
padding:8px;

}
nav li:hover, a:hover {color:#998100;}
li{display:inline;}
section { margin-bottom: 1000px; padding-top: 150px; float: left; }

请你能帮助我！

Answer 1

好吧，马上你的HTML无效..我看到两个直接的问题。

首先，关闭H1标签之后的结束标签不能存在（看起来这只是一次意外）。

<div class="wrapper">
<header>
<h1>Colve</h1></div>

其次，开始此行的结束没有任何意义..删除它。

</li><li><a class="button" href="contact.html">Contact</a></li>

哦，我撒了..还有第3个......这个元素没有结束标记。

<li><a class="button" href="#downloads">Downloads</a>

除此之外，您的HTML看起来很好看，但是将来您可能想要为此网站添加书签：

http://validator.w3.org/#validate_by_input

在使用HTML更正这些问题后，如果您仍然遇到问题，请更新您的问题。

Answer 2

Working DEMO

<div class="wrapper">
<header>
<h1>Colve</h1> <!-- remove the </div> present here -->
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>    
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>

在nav css中，将宽度设为自动

nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:auto;
float:right;
}

在width: 100%;中添加header {}，因为当前标头未正确对齐。 HTML构造不好。请从代码中删除额外内容。

如何制作平面设计菜单栏？

HTML

CSS

2 个答案: