内联与块级元素布局-优快云博客

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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