HTLM5 初学者 - 如何创建水平导航栏答案

【问题标题】：Beginner at HTLM5 - How to Create Horizontal Navigation BarHTLM5 初学者 - 如何创建水平导航栏
【发布时间】：2015-02-25 05:13:20
【问题描述】：

我需要一个水平导航栏，其中“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

显然我也想去掉下划线，我需要文本是黑色的。不知道我做错了什么。提前感谢您的帮助。

【问题讨论】：

标签： html colors center navbar underline

【解决方案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;
}
}

【讨论】：

关于文本为黑色并移除下划线，元素继承默认的链接文本颜色和下划线（因为文本在标签内）。所以你可以添加以下样式： ul li a { color:Black;文字装饰：无； }

【解决方案2】：

你必须把它放在：

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

编辑：

要将它放在中心，你必须给容器一个宽度，例如在这里 315px，但最好把它放在 % 或 em 中
....并添加一个填充到 a

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

【讨论】：

这行得通，但现在单词被挤压在一起并左对齐，如下所示：i.imgur.com/kj4OYkL.jpg
我可以使用以下代码修复它：a{float:left;边距右：80px；左边距：170px；颜色：#000;文字装饰：无； } 谢谢！