Question

我需要一个水平导航栏，其中“HOME”，“drawings”，“STORE”和“CONTACT”均匀分布在整个页面上。现在我的CSS看起来像这样：

<style type="text/css">
<!--
ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;
}

-->
</style>

我的HTML看起来像这样：

<body>
<div>
<ul>
<li><a href="home.asp">HOME</a></li>
<li><a href="Work.asp">DRAWINGS</a></li>
<li><a href="store.asp">STORE</a></li>
<li><a href="contact.asp">CONTACT</a></li>
</ul>
</div>
</body>

这就是网页的样子：http://i.imgur.com/st4m0RR.jpg

显然我还想摆脱下划线，我需要将文字设为黑色。不知道我做错了什么。提前感谢您的帮助。

Answer 1

您可以将li元素设置为float：left ..

像

ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;       
}
ul li {
 float:left;   
    margin-right:15px;
}
ul li:last-of-type {
    margin-right:0px;
}
}

Answer 2

你必须把它放在：

a{
  float:left;
  color:#000;
  text-decoration:none;
  padding;5px;
}

编辑：

要把它放到中心你必须给容器一个宽度，例如这里315px，但把它放在％或em更好的... ....并添加一个填充到a < / p>

div {
    width:315px;
    margin: 0 auto;
 }

HTML5初学者 - 如何创建水平导航栏

2 个答案: