Question

基本上我有一个带有一些锚元素的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>

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>元素根本不会移动，它必须是某种类型，但我不知道如何解决它。

Answer 1

你不会在锚元素上使用位置，除非你做了非常正统的事情。您根本无法理解CSS级别1.您需要将float应用于您不具备的div元素。

其次，您没有孩子div元素，这与可访问性相关。添加它们，将锚元素放入其中，然后将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的区别，否则你没有理由使用术语＆＃34;标记＆＃34;那些被称为元素。使用正确的术语将提高您的沟通效率，并更好地反映人们如何看待您的技能。

Answer 2

这是最简单的事情，我在css样式表上有另一个具有相同名称的元素。

首先检查小小的东西。

尝试定位<a> element</a>时出现奇怪的错误

2 个答案: