企业400电话
微网小程序
AI电话机器人
电商代运营
全 部 栏 目
企业400电话
网络优化推广
AI电话机器人
呼叫中心
网站建设
商标✡知产
微网小程序
电商运营
彩铃•短信
增值拓展业务
空格BUG
这篇是关于display:inline;的使用的，前几天作一个布局时，用这个效果，但始终没有出来，害得我浪费了二个小时，还多长了三行代码才解决；今天突然想起这事了，总感觉不对，因为我的思路是对的，可是效果就是出不来；于由重写代码，终于发现问题了，又是那个该死的空格BUG；
下面展示给大家看一下，同样的问题别再次出现在你的身上；
大家先看一下下边的CSS代码：
复制代码
代码如下:
style>
body{ margin:0; padding:0; font-size:12px; text-align:center;line-height:25px;}
#info{ margin:100px auto; background:#CCCC00; }
ul,li{ margin:0; padding:0; list-style:none;}
#info li{ border-left:1px solid #6633CC; display:inline;border-right:1px solid #6633CC; padding:5px 10px; margin-left:-1px;}
/style>
以下是布局的代码：
复制代码
代码如下:
div id="info">
ul>
li>网站首页/li>
li>情感文章/li>
li>给我留言/li>
li>友情链接/li>
/ul>
/div>
以下是出来的效果：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body{ margin:0; padding:0; font-size:12px; text-align:center;line-height:25px;} #info{ margin:100px auto; background:#CCCC00; } ul,li{ margin:0; padding:0; list-style:none;} #info li{ border-left:1px solid #6633CC; display:inline;border-right:1px solid #6633CC; padding:5px 10px; margin-left:-1px;} </style> </head> <body> <div id="info"> <ul> <li>网站首页</li> <li>情感文章</li> <li>给我留言</li> <li>友情链接</li> </ul> </div> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
看到了吗？IE和FIREFOX中的差别了吧！
再看下边的布局代码，我全部放在了同一行上：
复制代码
代码如下:
div id="info">
ul>li>网站首页/li>li>情感文章/li>li>给我留言/li>li>友情链接/li>/ul>
/div>
好了，这下看一下最后的效果吧！
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body{ margin:0; padding:0; font-size:12px; text-align:center;line-height:25px;} #info{ margin:100px auto; background:#CCCC00; } ul,li{ margin:0; padding:0; list-style:none;} #info li{ border-left:1px solid #6633CC; display:inline;border-right:1px solid #6633CC; padding:5px 10px; margin-left:-1px;} </style> </head> <body> <div id="info"> <ul><li>网站首页</li><li>情感文章</li><li>给我留言</li><li>友情链接</li></ul> </div> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
问题解决的一个办法：
<style type="text/css"> <!-- /* pr1984.com */ * {font-size:0;margin:0;padding:0;} body {font-family:"Verdana","宋体", "Arial",sans-serif;margin:100px 0;text-align:center;} a {font-size:12px;color:#000;text-decoration:none;} a:hover {color:#000;text-decoration:none;background-color:#FEFC6E;} #nav {min-width:400px;height:24px;border:1px solid #D28A05;border-width:1px 0;text-align:center;background:#ff9900 url("http://www.zishu.cn/attachments/month_0609/j2006912180.jpg");} #nav li {display:inline;padding:15px 15px 8px;border:1px solid #C97802;border-width:0 1px;margin-right:-1px;line-height:25px;} p {min-width:400px;margin:50px 0;font-size:12px;} --> </style> <!--[if lte IE 6]> <style type="text/css"> #nav ul,p {width:400px;} </style> <![endif]--> <div id="nav"> <ul> <li>首页</li> <li>发布信息</li> <li>我的客齐集</li> <li>帮助</li> </ul> </div>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上一篇：
Overflow OPREA
下一篇：
DIV+CSS 网页TIP的简单作法
相关文章
空格BUG
这篇是关于display:inline;的使用的，前几天作一个布局时，用这个效果，但始终没有出来，害得我浪费了二个小时，还多长了三行代码才解决；今天突然想起这事了，总感觉不对，因为我空格,BUG,空格,BUG,...
物联网卡不销户有什么影响？
物联网时代到来，万物互联概念炒得越发火热，物联网卡也因此一举成为科技、通讯界...
办理400电话的多少钱400电话办理收费标准
(办理400电话的多少钱)(400电话办理收费标准)以下内容由巨人小编整理发布。 一是找电...
昆明教育电销线路办理公司,电话营销线路-关于
昆明教育电销线路办理公司,电话营销线路目前全国呼叫中心外包真正成功率不超过60...
呼叫中心系统人工录音质检存在的问题
客户服务已经越来越成为体现竞争差异、提升公司形象、增加客户满意度的必争质地，...
企业客服知识库的两种解决方案
目前企业客服知识库有两种解决方案，分别是云客服知识库与本地化知识库两种，而对...
襄阳智能电销机器人系统（电销智能机器人哪家公司好）
本篇文章给我们谈谈襄阳智能电销机器人体系，以及电销智能机器人哪家公司好对应的...
际商电销机器人（际商电销机器人招聘）
本篇文章给大家谈谈际商电销机器人，以及际商电销机器人招聘对应的知识点，希望对...
Win10技术预览版系统下载地址大全（含简体中文版)）
2日凌晨，微软正式宣布新一代Windows系统的命名：Windows10。今日微软如约放出了Windows...
win10系统与老软件不兼容怎么解决?
大家都知道，我们使用win10系统上运行一些老软件的时候，有可能会遇到提示系统与软...
厦门营销电销机器人价格（电销智能机器人）
本文目录一览： 1、电销机器人到底多少钱？价格来去怎么这么大？2、电销机器人一年...
重庆移动电销机器人办理,电话线路如何办理-注意
重庆移动电销机器人办理,电话线路如何办理升企业与客户的沟通效率。电销人员本身对...
近似商标认定问题研讨
近似商标作为商标侵权诉讼中的一个重要概念，见诸于商标法第五十二条的规定。商标...
大连crm外呼系统（大连呼叫器）
本文目次一览： 1、crm和外呼零碎是绑定的吗 2、呼唤中央+CRM零碎 是什么？ 3、外呼零...
智能语音机器人你真的了解吗?
人工智能已经火了几年了，不少的企业都应用了办公上，特别是在电话营销、电话客服...
asp.net中ADO SQL数据库 笔记汇总 持续更新中
ADO连接数据库 1)获取连接字符串 方式一: 记住连接字符串 connectionString=" Integrated Secur...
空格BUG
这篇是关于display:inline;的使用的，前几天作一个布局时，用这个效果，但始终没有出来，害得我浪费了二个小时，还多长了三行代码才解决；今天突然想起这事了，总感觉不对，因为我空格,BUG,空格,BUG,...
咨 询 客 服
咨 询 客 服