解决css中inline-block元素之间有空白问题解决办法

 代码如下 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
 
            span {
                margin: 0;
                padding: 0;
                display: inline-block;
                width: 50px;
                height: 20px;
                background: red;
            }
        </style>
    </head>
    <body>
        <span></span><span></span> 
        <span></span>
        <span></span>
    </body>
</html>

解决办法

把内联标签表现成块并且不换行只能按照老方法display:block后再float它。

解决办法

加上 font-size:0; 和  font-size:12px; 不兼容safari浏览器，用行内元素李欢li，ie6下面中间有右间距1像素。

ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;font-size:0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;font-size:12px;}

时间： 2024-11-09 01:53:36

解决css中inline-block元素之间有空白问题解决办法的相关文章

CSS3去除inline block 元素之间多出的空格

display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结 以下方法不保证浏览器兼容性问题,仅在 Chrome 浏览器测试通过 HTML Code: <h5>未处理空格</h5> <ul>     <li>

css中去除inline-block元素间间距多种方法分享

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; } <d

一个css中关于li元素的使用，有疑问，请看代码，问题在哪里？

问题描述 一个css中关于li元素的使用,有疑问,请看代码,问题在哪里?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&

清除行内元素之间HTML空白的几种解决方案

行内块(inline-block)是非常有用的特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时,行内元素之间的空白有时候显示在屏幕上那是相当的讨厌   至今我还记得年轻是在IE6上开发的那些苦逼日子,特别希望IE浏览器采用 inline-block 的显示方式. 行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空

Node.js中AES加密和其它语言不一致问题解决办法

 这篇文章主要介绍了Node.js中AES加密和其它语言不一致问题解决办法,例如和C#.JAVA语言相互通信时,需要的朋友可以参考下 例子一:   这几天被一个问题困扰着.Nodejs的AES加密和Java,C#加密出来的不一致.当然,这样就不能解密了.纠结了许久:后来还是实在不行了,看了下源代码,要不然还得继续纠结下去.网上说,通常的nodejs AES和其他语言实现不一样.好吧~~或许吧. nodejs的crypto模块.    代码如下: var crypto = require('cry

解决css中display:inline-block中间的空白间隙

1.display:inline-block 让一个元素具有"区块元素"的属性(可以设置width和height),又具有"内联元素"的属性(不产生换行). 2.IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性. 让IE6内联元素具备inline-block特性 由于inline-block会触发IE的layout,所以IE6中只要设置{display:inline-block;}即可. 让IE6区块元素具备inline-block属

CSS中clear清除元素容器浮动

1. 问题的由来 有这样一种情形:在一个容器(container)中,有两个浮动的子元素,如图一.   (图一 设计视图是一个父容器中含有二个浮动的子元素) 请问HTML代码应该怎么写? 很简单啦,几行字就够了.  代码如下 复制代码 <div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div&

解决CSS中 display 与 visibility 的区别_基础教程

span为内联/inline元素,给他宽度赋值是没有效果的. span为内联/inline元素,给他宽度赋值100px+float:right;可以看到有了宽度. 这个li被定义为内联/inline,设置宽度没有效果 test test 这个li被定义为内联/inline+float:left,设置宽度有效果 test test

解决css中父div高度不随子div高度变化的方法

问题截图: 造成这种情况的原因是两个子div使用了float浮动属性,解决方法有两种: 1.给复层div加overflow:auto;属性即可,效果截图: 2.新建一个.clear{ clear:both}类,在kid2div下面加入<div class="clear"></div>清除一下浮动即可: