Html 简单的水平按钮/菜单栏 Dreamweaver
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8683883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple Horizontal Button / Menu Bar Dreamweaver
提问by Linuxmint
I'm just starting out with HTML and Dreamweaver. Basicly, I'm trying to create a simple, horizontal menu bar with mouseover and "browser resize" so the bar will be stretched to span the browser window etc.
我刚开始使用 HTML 和 Dreamweaver。基本上，我正在尝试使用鼠标悬停和“浏览器调整大小”创建一个简单的水平菜单栏，以便该栏将被拉伸以跨越浏览器窗口等。
Maybe someone could recommend a good tutorial for getting started with these beginner tasks.
也许有人可以推荐一个很好的教程来开始这些初学者任务。
I stuck a picture below so you know what I mean by "horizontal".
我在下面贴了一张图片，所以你知道我所说的“水平”是什么意思。
回答by Kris Hollenbeck
This should get you in the ballpark. You may need to tweak it a bit to your liking. But the underlying concept is there.
这应该让你进入球场。您可能需要根据自己的喜好稍微调整一下。但基本概念就在那里。
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
#navbar {
width:100%;
height:40px;
background-color:#000;
}
#navbar ul {
width:80%;
margin:0 auto 0 auto;
}
#navbar ul li {
float:left;
color:#CC0000;
padding:0 20px 0 20px;
border-right:1px solid #FFF;
border-left:1px solid #FFF;
height:40px;
list-style:none;
display:block;
line-height:40px;
text-align:center;
cursor:pointer;
}
#navbar ul li:hover {
background-color:#CCC;
}
</style>
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
FIDDLE:
小提琴：
回答by Dz.slick
You should do it with Un-ordered list like shown below.
您应该使用如下所示的无序列表来执行此操作。
<ul class=".mynavul">
<li><a href="index.html">Home</a></li>
<li><a href="serviceappointment.html">Service appointment</a></li>
<li><a href="pools&spas.html">Pools & spas</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="contactus.html" class="active">Contact us</a></li>
<li><a href="links.html">Links</a></li>
</ul>
and the CSS should be as shown below so it displays horizontally
并且 CSS 应如下所示，以便它水平显示
/* for the Ul */
ul.mynavul {
float: left;
width: 100%;
height: auto;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
display: block;
margin-bottom: 0px;
margin-left: 3px;
}
/* for the Li */
ul .mynavul li {
float: left;
width: 141px;
margin-left: 1px;
padding: 0px;
text-align: center;
display: block;
margin-top: 19px;
color: #D8DCD8;
font-size: 14px;
}
/* for the Links */
ul .mynavul li a {
color: #CCC;
}
/* for the Links Hover */
ul .mynavul li a:hover {
color: #CCC;
}
/* Adjust the Colors, Width, and Height as needed */
