解决css中display:inline-block产生的空隙问题
2024-09-07 01:49:43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style: none;
width: 100px;
height:20px;
border:1px solid #ff0000;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<body>
</head>
这样的代码会产生如下图所示的间隙问题
解决方法有很多,可以通过调整margin为负值来解决,也可以通过其他的方法,但是我最喜欢的是这种方法
<ul id="ul">
<li>1</li
><li>2</li
><li>3</li
><li>4</li>
</ul>
闭合标签放在下行的开头,或者是通过注释来解决
<ul id="ul">
<li>1</li><!--
--><li>2</li><!--
--><li>3</li><!--
--><li>4</li>
</ul>
亲测在浏览器下支持良好,ie6/7/8都OK的,但是有同学会说:display在ie6/7无效。那么请看我的上一篇决解display:inline-block的兼容问题
最新文章
- VS2008 Debug与Release的本质区别(转)
- MyEclipse配置Tomcat 6
- PHP跳转页面的几种实现方法详解
- css 文字换行控制
- [shell基础]——I/O重定向
- gridview 绑定方法中带参数
- java中输出流OutputStream 类应用实例(转)
- Vue初学跳坑
- SQLServer之删除触发器
- Python的math模块
- 【JS】中ajax的URL中包含中文,后台接收乱码
- mac 环境变量
- 《算法》第六章部分程序 part 2
- 总是Eqw
- 将文件转换成byte[]数组
- CentOS7安装ms8可能出现的错误
- Linux命令(十) 在文件或目录之间创建链接 ln
- PostgreSQL入门,PostgreSQL和mysql
- 【EasyUI学习-2】Easyui Tree的异步加载
- API图片路径和超链接语义化转换