如何使用css实现一个简单的顶部对齐

html-css014

如何使用css实现一个简单的顶部对齐,第1张

要让div顶端对其，那么就必须根据HTML的布局和css样式的对其方式决定了：

1.浮动(float),这种情况下默认横向是left,纵向是top方向，所以默认就满足顶端对其；

2.定位(position),这种情况下只要设置要top的值就可以了；

3.display：inline-block；这种情况下，一般不是顶端对其，必须在父级加上一条样式：vertical-align: top才能实现顶端对其。

实现这个效果

我给你2种方法！

第一

用dl

dt

dd

结构

<dl>

<dt>前面的小图标</dt>

<dd>文字</dd>

</dl>

在写样式控制

第二

给li里面的文字（a标签）定义背景

这个

应该很实用！

结构

<ul

class="style">

<li><a

href="#">

wenzi

</a></li>

</ul>

样式

.style

li

a

{background:url(前面小图片的路径)

no-repeat

3px

3px(定义小图片的位置，可以自己调试)；padding-left：10px（要是小图片后面的文字离图片近了可以这样定义）；

a{ width:500pxheight:30pxfont-size:12pxdisplay:block}

<a href='#'>顶对齐</a>

先把a标签转成块级元素,它默认是行级元素,也就是说行级元素下是没有标准的宽和高,即便是你设置了,它最终显示还是以字符所占的高和宽

转成块级后这样就可以了,默认字符是以浏览器左上角显示的