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

发布网友发布时间：2022-05-12 07:40

共6个回答

懂视网时间：2022-05-12 12:01

对比起XHTML来说，HTML5通过更简单的元素引起了一系列的思考，坦诚地讲,这真的是急需的简化。这些简化之一就是能够通过标签包装像div,h标签(h1...h6),和段落标记P 这些块级元素。你没看错:用一个A标签包裹块级元素(译者注: 在HTML5以前，a标签属于行内元素，而div,h1,p 等为块级元素，如果强行包裹，可能会被强行截断为多个a标签。当然，都是浏览器的事啦。).

示例代码：

代码如下:

关于 David Walsh

原文作者是27岁的 Web Developer, 并且是jQuery & MooTools方面的专家级顾问,地址为 Madison, Wisconsin. 同时也是Wynq Web 实验室的创始人兼主程 . 格言：“我并不设计网站,只是让他们跑起来.”

就是这样，一个A标签包裹着div,p,h1这样的元素，需要注意的是，你不能在一个A标签内包含另一个A标签，否则发生什么事，可能是各个浏览器不一致的。

你如何看待？
对于用A标签包含着块级元素我很矛盾,快速查看时感觉就像一堆垃圾代码。另一方面，为了回避这种方式，我们一直使用JavaScript来处理。可点击元素的目的就是为了完成任务和功能，而使用原生HTML来完成这种功能比起JS来说更自然，有时候肯定会很方便。我想问的是：对于这个实践你如何看待？你能立即使用吗？请分享您的观点！
(译者注：在译者的项目里，一个组员就使用了这个功能。在MyEclipse里面看着很难过，因为是一堆的黄色警告。但是客观来说，有时候有些代码确实很有效，比如什么之类的)

热心网友时间：2022-05-12 09:09

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>

热心网友时间：2022-05-12 10:27

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

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

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

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

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

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

解决办法：

＜style＞.classname{display:block;postion:XXX;}li{display:block;}＜／style＞

＜style＞#a1{YYY}#a2{YYY}#a3{YYY}＜／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属性，导航条

热心网友时间：2022-05-12 12:02

如果想不在一行，需要样式设置每个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;}

热心网友时间：2022-05-12 13:53

这样不用定位就一行一行的显示
<li><a href="1.html" class="top_nav">文字</a></li>
<li><a href="2.html" class="top_nav">文字</a></li>

热心网友时间：2022-05-12 16:01

没有换行，要写换行标识符