Html 尝试定位时出现奇怪的错误<；a>；要素

基本上，我有一个div，其中有一些锚元素，需要作为导航菜单定位

HTML看起来不错，CSS适用于所有锚元素，除了一个锚元素，它拒绝正常定位。我可以把代码放在这里，但它确实没有问题

我还是要说：

HTML

<div id="navBar"><a id="home" href="Home.html">Home</a>
         <a id="a" href="#">a</a>
         <a id="b" href="#">b</a>
         <a id="c" href="#">c</a>
         <a id="d" href="#">d</a>
         <a id="e" href="#">e</a>
         <a id="f" href="#">f</a>
</div>

<div id="nav">
<div><a id="a" href="#">a</a></div>
<div><a id="b" href="#">b</a></div>
<div><a id="c" href="#">c</a></div>
<div><a id="d" href="#">d</a></div>
<div><a id="e" href="#">e</a></div>
<div><a id="f" href="#">f</a></div>
</div>

---

这一切看起来都很简单，但由于某种原因，

元素根本不会移动，它一定是某种类型的a，但我不知道如何修复它。

除非你在做一些非常非正统的事情，否则不要在锚元素上使用位置。您根本不理解CSS级别1。您需要将

float

应用于

div

元素……而您没有这些元素

其次，您没有子

div

元素，这是与可访问性相关的。添加它们，将锚元素放入其中，并将

div

元素与

宽度一起浮动，以便

第三，您正在为每个菜单项应用大量的空间，从主菜单可以清楚地看出，您希望这是一个基于文本的菜单

最后，如果您要为菜单使用
id
，那么您最好使用
nav
，因为它与（X）HTML5的
nav
元素相关

CSS

#home { position: absolute; top: 10px; left: 160px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration:none;}
#a {position: absolute; top: 10px; left: 350px; font-size: 18px; font-family: "century gothic", 
sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#b { position: absolute; top: 10px; left: 500px; font-size: 18px; font-family: "century gothic",
sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#c { position: absolute; top: 10px; left: 650px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#d { position: absolute; top: 10px; left: 800px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#e { position: absolute; top: 10px; left: 950px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#f { position: absolute; top: 10px; left: 1100px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}

#nav > div {float: left; width: 200px;}
#nav > div > a {display: block;}

（X）HTML

<div id="navBar"><a id="home" href="Home.html">Home</a>
         <a id="a" href="#">a</a>
         <a id="b" href="#">b</a>
         <a id="c" href="#">c</a>
         <a id="d" href="#">d</a>
         <a id="e" href="#">e</a>
         <a id="f" href="#">f</a>
</div>

<div id="nav">
<div><a id="a" href="#">a</a></div>
<div><a id="b" href="#">b</a></div>
<div><a id="c" href="#">c</a></div>
<div><a id="d" href="#">d</a></div>
<div><a id="e" href="#">e</a></div>
<div><a id="f" href="#">f</a></div>
</div>



PS除非您向某人澄清XHTML与HTML的区别，否则您没有理由使用术语“标记”，这些术语称为元素。使用正确的术语将提高您的沟通效率，更好地反映人们对您技能的看法。
这是最简单的事情，我在css样式表上有另一个同名元素

总是先检查小的东西。
你能给JSFIDLE解决你的问题吗。显然我还是个初学者，但是谢谢，我会尝试将它们放在div中，我仍然不知道所有链接的行为如何正确，但这一个没有。很抱歉，它没有帮助，div只是与元素的行为相同，在位置不受影响的情况下。创建一个最小的测试用例，编辑您的帖子，然后再次回复我的答案，我将修改我的答案和回复。否则，这是一个在黑暗中拍摄，有人可能会标记为太模糊的问题。