html - 尝试定位 元素时的奇怪错误

Question

基本上我有一个 div，里面有一些需要作为导航菜单定位的 anchor 元素。

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

无论如何我都会把它放在:

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>

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;}

这一切看起来都很简单，但出于某种原因 <a>元素根本不会移动，它一定是某种 a 但我不知道如何修复它。

Answer 1

除非你在做一些非正统的事情，否则不要在 anchor 元素上使用位置。您根本不理解 CSS 级别 1。您需要申请 float到 div元素......你没有。

其次你没有 child div元素，这与可访问性相关。添加它们，将 anchor 元素放入其中并 float div带有 width 的元素就这样……

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

最后，如果您要使用 id对于菜单，您不妨使用 nav因为它与 (X)HTML5 的 nav 相关元素。

CSS

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

(X)HTML

<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 的区别，否则您没有理由使用术语“标签”，这些被称为元素。使用正确的术语将提高您的沟通效率，并更好地反射(reflect)人们如何看待您的技能。