长度不规则链接的写法

最新推荐文章于 2025-11-05 20:48:02 发布

转载最新推荐文章于 2025-11-05 20:48:02 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuzhongwusan/archive/2008/09/03/1283030.html

文章标签：

#xhtml

本文探讨了HTML中内联元素与块级元素在网页布局中的应用与区别，通过实例解析了如何正确设置内联元素的高度及左右距离，以及float属性对元素布局的影响。

这个问题弄了一个小时，才想明白。主要是当时块与内联元素相互转换，而且好久没有遇到长度不一的链接，都忘记了内联元素了。下面这个例子是单独提出来的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

.a,p{PADDING-RIGHT: 2px; FONT-SIZE: 14px; FLOAT: right; WIDTH: 372px; COLOR: #032a79; LINE-HEIGHT: 200%; TEXT-ALIGN: left ; width:300px; height:500px; margin-right:30px; background-color:#33CCCC;}

text-decoration:underline;

text-align:left;

font-size:14px;

LETTER-SPACING: 3px;

line-height:21px;

margin-left:10px;

}

.a a{

float:left;

}

</style>

</head>

<body>

<p><a href="#">不规则链接正常显示,这个的效果才是我想要的：给内联元素设置高度可通过行高设置<因为内联元素没有宽高>,设置左右距离可以通过外边距</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a></p>

<div class="a"><a href="#">这个a元素加了float:left所以显示效果才会出错</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据测数据哦测数据哦测数据哦测数据哦测数据哦测数据哦测数据哦哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a><a href="#">测数据哦</a></div>

</body>

</html>

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2008/09/03/1283030.html