长度不规则链接的写法

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.a,p{PADDING-RIGHT: 2px; FONT-SIZE: 14px; FLOAT: right; WIDTH: 372px; COLOR: #032a79; LINE-HEIGHT: 200%; TEXT-ALIGN: left ; 300px; height:500px; margin-right:30px; background-color:#33CCCC;}
 a{
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/p/1283030.html