169it科技资讯
169it -->


当前位置:  编程技术>WEB前端

li中插入img图片间有空隙的解决方案

    来源: 互联网  发布时间:2014-10-07

直接加样式img{vertical-align:bottom; display:block}

当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-align:bottom改成top,可根据自己遇到的不同情况来设vertical-align的参数

方法一:

代码如下:

img{vertical-align:top; display:block}

代码如下:

<style>
#l1 {float:left;background:#000;}
#l1 ul li {list-style:none;padding:0;margin:0}
img {vertical-align:bottom; display:block;}
</style>

方法二:设置容器font-size:0(个人认为这种方法最好!!!)


    
相关技术文章:
    ▪CSS3中Transition属性详解以及示例分享

     1、transition-property的语法[css]transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)   2、transition-property的属性值  (1)none:transition马上停止执行  (2)all:元素产生任何属性值变化时都将执行transition效果  (3)attr:指定要运动的样式 一、transition-property——指定要运动的样式   1、transition-property的语法[css]transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)   2、transition-property的属性值  (1)none:transition马上停止执行  (2)all:......


    ▪父div高度不能自适应子div高度的解决方案

     代码如下:<div id="parent"><div id="content"> </div></div> 当content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。解决方案如下: 代码如下:<div id="parent">  <div id="content"></div>  <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>  </div> 在层的最下方产生一个高度为1的空格,可解除这个问题。 另外还有这样写的:<div style="hei......


    ▪告别AJAX实现无刷新提交表单

     通常对于无刷新提交表单,我们都是运用ajax实现的。前段时间跟着老大了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。 第一种: (html页面) 代码如下:<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="utf-8">    <title>无刷新提交表单</title>    <style type="text/css">        ul{ list-style-type:none;}    </style></head><body>    <iframe name="formsubmit" style="display:none;">    </iframe>    &l......


 
最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不换行输出)

     强制不换行,直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 代码如下: div{white-space:nowrap;} ......


    ▪IE里button设置border:none属性无效解决方法

     某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。下面给......


    ▪border:none与border:0使用区别

     一、border:noneborder-style的简写在chrome审查元素看到以下结果 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在firefox中用firebug查看元素会看到以下结果: 代码如下:element.style {    border: medium none;}注意这个medium值二、border:0border-width的简写在chrome审查元素看到以下结果......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号