15年来，为全国50万+企业提供互联网数字化基础应用服务。
微网小程序
电商运营
关于我们
付款方式
荣誉资质
业务提交
代理合作
知 识
400-1100-266
9:00-24:00（工作日）
首 页
企业400电话
Hot
网站建设
商标✡知产
网络优化推广
热
AI电话机器人
呼叫中心
彩铃•短信
增值拓展业务
新
主页
>
知识库
> 空格BUG
空格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需再刷新一下页面才能执行]
标签：
长治
河南
上海
红河
沈阳
新疆
沧州
乐山
巨人网络通讯声明：本文标题《空格BUG》，本文关键词 ；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。
相关文章
电销机器人到底如何运作的？
很多人对 电销 机器人到底如何运作存在着巨大的好奇心，那么今天，小编就带大家看一下机器人的运作流程！ 电销...
10-24
电话机器人的兴起对电销行业来说是“惊喜”还
随着互联网 大数据 的普及，许多 电销 行业如雨后春笋般争先恐后地冒出来。而今电销行业的混乱，让各位涉足电销...
10-24
百应电话机器人有哪些功能？百应电话机器人好
百应 智能 电话机器人 能够协助企业进行呼入接待、 外呼 回访等服务场景，能够经过不断的培训学习，逐步完善成专...
10-24
客服外呼系统都有哪些优势？
当前呼叫中心电话系统被企业用于业务 电销 以及客户服务，然而随着企业需求不断扩大，原来传统的自建 呼叫中心...
10-24
电销机器人效果怎么样？智能电话机器人可行吗
几百数千年后，或许没人会记得卡斯帕罗夫曾是世界第一的围棋高手，但人们会记得，他败给了电脑深蓝。那虽算不...
10-24
百应智能外呼系统，贷后管理科技升级
去年底开始，接连出台政策和法规加强对消费 金融 等金融形态进行 规范 。强 监管 下，行业走向规范发展，行业竞...
10-24
百应智能外呼系统引领外呼行业新风向
电话销售： 您好，我这边是XX地产，给您推荐一下精装酒店式公寓，有兴趣了解一下吗? 客户： 具体位置在哪里啊?...
10-24
小贷企业为什么需要电销机器人？
随着信贷行业逐步进入我们的生活中，越来越多人选择借款来处理资金难题。信贷企业不断涌现，业务开展迅猛，行...
10-24
雷霆电话机器人是如何转接人工的？
当我们在拨通移动、联通或电信 运营商 的客服电话时，总会要先经过一些机械化的选择，然后成功连接人工坐席反馈...
10-24
米卡迪电话机器人效果怎么样？
外呼 电话机器人 ，之所以能智能的与客户无忧交流，因为运用了下面这么多高技术。 ASR 语音识别 米卡迪电话机器人...
10-24
灵声电话机器人效果怎么样？好用吗
外呼 电话机器人 ，之所以能智能的与客户无忧交流，因为运用了下面这么多高技术。 灵声 电话机器人 效果怎么样？...
10-24
电销机器人要想效果好，话术定制有多重要
电话机器人 是基于智能语音技术的智能营销工具。它会像真人一样主动拨打客户的电话，介绍产品并回答客户的咨询...
10-24
智能电话机器人的实现原理，使用安全吗？
随着科学技术的进步和 人工智能 的发展，越来越多的智能产品已经进入我们的工作和生活。智能手机、智能电视、智...
10-24
福州哪里有电话机器人研发公司？
人工智能 再次成为各行各业关注的焦点，自从这个概念首次提出以来，60年已经过去了。自从AlphaGo以巨大优势击败人...
10-24
电销机器人销售能力怎么样？
自从 电话机器人 一出现，在 电销 行业火爆了起来。面对电话机器人的各种优势，企业跃跃欲试，但又害怕效果不理...
10-24
推荐文章
AOFAX金融业呼叫中心系统，营销、管理与客服并重的电话软件
谈数据库营销
centos安装xenserver xe命令行的方法
【干货】实用的网站空间购买指南
邮件发送简单例子-jsp文件
语音智能电话机器人
laravel与thinkphp之间的区别与优缺点
uniqueidentifier转换成varchar数据类型的sql语句
上一篇：
Overflow OPREA
下一篇：
DIV+CSS 网页TIP的简单作法
一起分享吧
版权所有：巨人网络(扬州)科技有限公司——拥有网站建设十年经验，具备独立网站开发能力，能够提供完善的网站设计及相关的网站制作服务！ 全国统一服务热线：400-1100-266
展开
收缩
QQ咨询
在线咨询
客服小董
客服小张
客服小刘
客服小李
客服小王
招商加盟
财务查询
微信客服
电话咨询
400-1100-266
