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标签转成块级元素,它默认是行级元素,也就是说行级元素下是没有标准的宽和高,即便是你设置了,它最终显示还是以字符所占的高和宽
转成块级后这样就可以了,默认字符是以浏览器左上角显示的