一个项目中img和a的那点事,多余5px高度以及a定义尺寸

2015-09-30 21:37 来自:HTML/CSS 评论(0) 查看(729)

前几天有一个客户的一个项目,其实主要还是前端的工作,一个简单的模块其实就是用SQL调用到一个商城的数据,然后再写下前端,前端直接用html和CSS就够了,这个地方。想实现的前端效果也很简单,就是如下图所示。
152124w64esn6c80wsn6ge

效果展示

相信只要熟悉前端的朋友都知道,这是一个非常常规的的前端模块。然而我交给我的一个网上认识的童鞋在写这个东西,让他当做练练手,结果就出问题了。主要有两个问题,第一就是img下的a造成整体高了5px;第二就是下面绝对定位的,的尺寸不能与整体统一。如下图的两个箭头之处。

152507ravok9t1tattdup5

每一个图片的HTML代码如下:

152945yk69k2b7ntdq66x2

下面是CSS代码

153122wwgurrh8ew35enon

关于定义a的尺寸

其 实看到这里大家已经很清楚了,比如下面的.indexad li span a 中明明已经定义了width:230px;这跟img的宽度是一致的,那么为什么就是文字短了一截呢?那是因为这个宽度的约束根本就没有效果,如果我文字 多一点或者少一点,这个宽度会变。其实只需要在这个<a>的CSS中加入一句display: block;即可。

关于img多出5px高度

其 实看那个图就已经知道了,因为我是在浏览器的调试状态下截图的,大家可以看到会标注出有个17px的高度,而默认的文字是12px,因此多余的就是 5px。而且在图片上的<a>我们是没有文字的,因此这里可以直接定义这个<a>的文字大小为0;有就是加上indexad li  a{font-size:0;}。同样地我们还可以定义<a>的高度为0,根据上面定义<a>的方法就是加上indexad li a{height:0;display:block;}。

就经过上面两个简单的处理就可以修复这两个问题,从而实现开始我们需要的那种效果。

转载请注明出处:一个项目中img和a的那点事,多余5px高度以及a定义尺寸 - 木泉网
分享:
标签:

发表评论

请登录

未登录

返回顶部