关于HTML5 a标签的位置问题？

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于HTML5 a标签的位置问题？相关的知识，希望对你有一定的参考价值。

1、应该用一个外层盒子来定位，这样盒子内的各个元素的相对位置不会受影响；
2、如果一定要在子元素上定位，那也应该错开位置，否则肯定挤在一起的，因为都定位到同一位置了；
3、a标签不应该包含li标签，而应该是li标签包含a标签；
4、font标签已经是被淘汰的（除非完全不用css），不建议使用。
比如：
<ul class="top_nav">
<li><a href="1.html">文字</a></li>
<li><a href="2.html">文字</a></li>
<li><a href="3.html">文字</a></li>
<li><a href="4.html">LD</a></li>
</ul> 参考技术A

一、如果display:block（块元素）：

1.当“postion:static”（普通流）时，没有问题。

2.当“postion:relative”（偏移）时，没有问题。

3.当“postion:absolute”（相对父元素定位）时，有问题，通常会叠加。（请使用id以解决）

4.当“postion:fixed”（相对窗口定位）时，有问题，通常会叠加。（请使用id以解决）

二、如果display:inline（行内元素）：有问题，通常会变成一行

解决办法：

＜style＞.classnamedisplay:block;postion:XXX;lidisplay:block;＜／style＞

＜style＞#a1YYY#a2YYY#a3YYY＜／style＞

＜ul＞

＜li＞＜a href="url／1.html" class="classname" id="a1"＞words＜／a＞＜／li＞

＜li＞＜a href="url／2.html" class="classname" id="a2"＞words＜／a＞＜／li＞

＜li＞＜a href="url／3.html" class="classname" id="a3"＞words＜／a＞＜／li＞

＜／ul＞

#建议：使用 li 元素嵌套 a 元素

#”YYY“代指其他声明（样式），如：top:100px;width:100px;

#参考（w3school.com.cn）：postion属性，导航条

本回答被提问者采纳参考技术B 如果想不在一行，需要样式设置每个a标签的位置。比如：
.top_nav:nth-child(1)top:10px;
.top_nav:nth-child(2)top:30px;
.top_nav:nth-child(3)top:50px;
.top_nav:nth-child(4)top:70px; 参考技术C 这样不用定位就一行一行的显示
<li><a href="1.html" class="top_nav">文字</a></li>
<li><a href="2.html" class="top_nav">文字</a></li> 参考技术D 没有换行，要写换行标识符 追问

我加上了还是不行，我是在每个后加的,没有加错吧，谢谢

追答

对的，加在后面，但是里面有个斜杠，推荐你使用Dreamweaver

你可以通过图形化界面了解代码