空格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>

以下是出来的效果：

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;}

  • 网站首页
  • 情感文章
  • 给我留言
  • 友情链接

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

看到了吗？IE和FIREFOX中的差别了吧！
再看下边的布局代码，我全部放在了同一行上：


代码如下:

<div id="info">
 <ul><li>网站首页</li><li>情感文章</li><li>给我留言</li><li>友情链接</li></ul>
</div>

好了，这下看一下最后的效果吧！

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;}

  • 网站首页
  • 情感文章
  • 给我留言
  • 友情链接

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

问题解决的一个办法：

#nav ul,p {width:400px;}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 空格BUG

    空格BUG

    这篇是关于display:inline;的使用的,前几天作一个布局时,用这个效果,但始终没有出来,害得我浪费了二个小时,还多长了三行代码才解决:今天突然想起这事了,总感觉不对,因为我的思路是对的,可是效果就是出不来:于由重写代码,终于发现问题了,又是那个该死的空格BUG: 下面展示给大家看一下,同样的问题别再次出现在你的身上: 大家先看一下下边的CSS代码: 复制代码 代码如下: <style> body{ margin:0; padding:0; font-size:12px; text-a

  • 一个自动居中的导航条实例与相关问题 DIV+CSS

    这是我刚刚作的一个导航条,为了让那四个LINK居中,我这样作了,但作完后发现了很多的问题,写出来和大家分享一下! 首先我们先来看一下这个导航条! test zishu /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none

  • 非常不错的 子鼠 滑动图片效果 Javascript+CSS

    非常不错的 子鼠 滑动图片效果 Javascript+CSS

    第一步,设计一下我想要的效果! 我用FW把以前作的相册效果(http://www.jb51.net/blogview.asp?logID=628)改了改,设计一张简单的效果图! 第二步,布局! 复制代码 代码如下: <div id="imgBox"> <ul> <li><a href="#"><img alt="this is 001" src="http://files.jb51.

  • document.all与WEB标准

    1.DOM WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[].DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色,那就可以在javascript中用document.all[]访问这个TABLE.但DOM也有所不同,因为浏览器厂商之间的竞争,各浏览器厂商都开发了自己的私有DOM,只能在自己的浏览器上正确运行,document.all[]就是只能运行在 IE是的微软

  • Web里URL空格的转换方法

    看URL是HttpUtility.UrlEncode将空格转换成了"+"号,原因找到就着手解决Bug.引用: 复制代码 代码如下: fileName = HttpUtility.UrlEncode(fileName, Encoding.UTF8); fileName = fileName.Replace("+", "%20"); 通过Replace替换解决,虽然问题解决了,但这并不是一个很好的方法,如果文件夹或文件名中包含"+"

  • IIS UNICODE Bug

    一．存在的漏洞1. 微软IIS 4.0 / 5.0 存在扩展UNICODE目录遍历漏洞,该漏洞既是一远程漏洞,同时也是一本地漏洞. 受影响的版本: Microsoft IIS 5.0 + Microsoft Windows NT 2000 Microsoft IIS 4.0 + Microsoft Windows NT 4.0 + Microsoft BackOffice 4.5 - Microsoft Windows NT 4.0 + Microsoft BackOffice 4.0 - Mi

  • IOS 中UITextField和UITextView中字符串为空和空格的解决办法

    IOS 中UITextField和UITextView中字符串为空和空格的解决办法 在用UITextField,UITextView声明的属性写一些页面的时候,经常会出现这样的小bug,就是给空值或空格也能进行传值或存储,这里给一些解决的小方法: eg: 这里声明了一个属性,就以此为例来说 @property (nonatomic, strong) UITextField *titlefield; 为空时: if(_titlefield.text == nil){ //执行一些警告操作 } if

  • javascript模版引擎-tmpl的bug修复与性能优化分析

    精妙的 tmpl 前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 "javascript micro templating" 最为精妙,寥寥几笔便实现了模板引擎核心功能. 它的介绍与使用方式请看作者博客:http://ejohn.org/blog/javascript-micro-templating/ 让我们先看看他的源码: 复制代码 代码如下: (function(){ var cache = {}; this.tmpl = function (st

  • IE 5.x/Win 和模型bug

    IEbug body .wrap{ width:500px;} .wrap *{text-align:left;} /* clear float*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ .clearfix {heigh

  • msn上的tab功能Firefox对childNodes处理的一个BUG

    Firefox对childNodes处理的一个BUG      childNodesFirefox在处理childNodes没有过滤换行与空格.所以在初次使用的时候,得到效果不是预期的效果. HTML 复制代码 代码如下: <ul class="tbtn" ID="menuList"> <li class="curr" id="tabap3_btn_0" onclick="tabit(this)&q

随机推荐