Html 构建我的第一个导航栏？

好的！我今天刚开始学习HTML和CSS，我认为这将是一种通过构建内容而不仅仅是阅读文本来学习的好方法

[]

所以我决定构建一个示例导航栏。

但现在我的问题是水平线的定位。我是否必须将像素设置为绝对或相对位置？不能自动完成吗？ 为什么水平线不覆盖浏览器的总宽度？我可以调整水平线的宽度吗

---

编辑：谢谢大家。这是编辑后的示例

删除

浮动：左来自
#菜单的CSS定义

样品

#菜单的CSS
根据布局的外观，此定义可能足够：

#menu {
    display:block;
    height:108px; /* Looks better with like: 40px !! */ 
}

更新样本：

使用居中菜单更新了示例
我建议您在继续之前阅读。看来你真的不知道自己在做什么，所以先学后问问题=p
在JSFIDLE上粘贴了一个可查看的示例：我在thank you guys为你和其他人创建了一个JSFIDLE:）…从现在开始，当我ask@unussunu删除属性和值之间的空格，在某些浏览器中，它可能会破坏您的网页。我还建议使用标签。另外：你是网络开发新手吗？你真的用了http//：而不是http:/？@你的意思是id和=之间的空格和“menu”垂直对齐和显示也没用。对，我只是复制并粘贴了它。-我猜另一个宽度和文字阿尔金：中心；本来打算将菜单放在屏幕中央？宽度也没用^^@smamatti是的，最初我试图将它放在中间。使用float，我可以将它向右推，但未能将它放在中间。对于display:block，在我知道有一个名为font-weights的属性use
text-align:center之前，我试图增加字体的权重用于此。这是因为元素以内联方式显示：
display:inline块-请参阅答案底部的更新示例。我更喜欢边做边学的方法。你可以从一些教程、selfhtml或任何你找到的东西开始，但你不需要在开始时阅读属性等在我看来，这不是对这个问题的真正答案，而是一个建议，你可以把它粘贴成评论。如果没有人认为“我看到了我想要的东西，所以我的代码是好的”，我可以同意你的看法。悲哀地事实上，我今天看到了一些来自Newboston的视频，然后我开始关注w3.org页面。像这样的东西会扼杀我的兴趣，不幸的是，我没有太多耐心：(
ul {
    list-style:none;
color:red;
}

#menu {
    float:left;
    vertical-align:middle;
    display:block;
    width:600px;
    height:108px;
}

#menu li {
    display:inline;
    font-size:20px;
    padding:0px;
}

#menu a:link {
    color:white;
    font-weight:bold;
    padding:20px;
    background-color:#27A285;
}

#menu a:hover {
    background-color:#E1C618;
    color:brown;
}

hr {
    height:5px;
    background-color:red;
}

#menu {
    vertical-align:middle;
    display:block;
    width:600px;
    height:108px; /* Looks better with like: 40px !! */ 
}

#menu {
    display:block;
    height:108px; /* Looks better with like: 40px !! */ 
}

#menu {
    height:40px;
    text-align: center;
}