扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一个项目中img和a的那点事，多余5px高度以及a定义尺寸
前几天有一个客户的一个项目，其实主要还是前端的工作，一个简单的模块其实就是用SQL调用到一个商城的数据，然后再写下前端，前端直接用html和CSS就够了，这个地方。想实现的前端效果也很简单，就是如下图所示。
效果展示
相信只要熟悉前端的朋友都知道，这是一个非常常规的的前端模块。然而我交给我的一个网上认识的童鞋在写这个东西，让他当做练练手，结果就出问题了。主要有两个问题，第一就是img下的造成整体高了5px；第二就是下面绝对定位的，的尺寸不能与整体统一。如下图的两个箭头之处。
每一个图片的HTML代码如下：
下面是CSS代码
关于定义<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定义尺寸 - 微构网络
- 在线咨询
- 15574303608
-
项目经理微信
-
移动版官网