空格BUG
更新時(shí)間：2006年09月28日 00:00:00 作者：
這篇是關(guān)于display:inline;的使用的，前幾天作一個(gè)布局時(shí)，用這個(gè)效果，但始終沒(méi)有出來(lái)，害得我浪費(fèi)了二個(gè)小時(shí)，還多長(zhǎng)了三行代碼才解決；今天突然想起這事了，總感覺(jué)不對(duì)，因?yàn)槲业乃悸肥菍?duì)的，可是效果就是出不來(lái)；于由重寫代碼，終于發(fā)現(xiàn)問(wèn)題了，又是那個(gè)該死的空格BUG；
下面展示給大家看一下，同樣的問(wèn)題別再次出現(xiàn)在你的身上；
大家先看一下下邊的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>網(wǎng)站首頁(yè)</li>
<li>情感文章</li>
<li>給我留言</li>
<li>友情鏈接</li>
</ul>
</div>
以下是出來(lái)的效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
看到了嗎？IE和FIREFOX中的差別了吧！
再看下邊的布局代碼，我全部放在了同一行上：
<div id="info">
<ul><li>網(wǎng)站首頁(yè)</li><li>情感文章</li><li>給我留言</li><li>友情鏈接</li></ul>
</div>
好了，這下看一下最后的效果吧！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
問(wèn)題解決的一個(gè)辦法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
下面展示給大家看一下，同樣的問(wèn)題別再次出現(xiàn)在你的身上；
大家先看一下下邊的CSS代碼：
復(fù)制代碼 代碼如下:
<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>
以下是布局的代碼：
復(fù)制代碼 代碼如下:
<div id="info">
<ul>
<li>網(wǎng)站首頁(yè)</li>
<li>情感文章</li>
<li>給我留言</li>
<li>友情鏈接</li>
</ul>
</div>
以下是出來(lái)的效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
看到了嗎？IE和FIREFOX中的差別了吧！
再看下邊的布局代碼，我全部放在了同一行上：
復(fù)制代碼 代碼如下:
<div id="info">
<ul><li>網(wǎng)站首頁(yè)</li><li>情感文章</li><li>給我留言</li><li>友情鏈接</li></ul>
</div>
好了，這下看一下最后的效果吧！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
問(wèn)題解決的一個(gè)辦法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
JavaScript實(shí)現(xiàn)form提交，回車提交URL地址偽靜態(tài)
文本框input里輸入內(nèi)容后，直接Enter回車鍵提交表單form，是很方便的。如果不使用form提交，用JavaScript來(lái)實(shí)現(xiàn)提交動(dòng)作，而且提交URL地址偽靜態(tài)化，不想帶問(wèn)號(hào)和搜索關(guān)鍵詞，搜索框內(nèi)enter回車鍵自動(dòng)提交那么應(yīng)該如何實(shí)現(xiàn)呢。2022-12-12
左圖右內(nèi)容其實(shí)就是一個(gè)很簡(jiǎn)單的布局了，我們經(jīng)常會(huì)在種大的門戶網(wǎng)站經(jīng)?？吹降膱D文混排效果了，下面給大家介紹一下實(shí)例2013-11-11
頁(yè)面遮罩層，并且阻止頁(yè)面body滾動(dòng)。bootstrap模態(tài)框原理
最近在做手機(jī)端效果的時(shí)候，頁(yè)面需要在下拉菜單滾動(dòng)的時(shí)候，阻止頁(yè)面的滾動(dòng)。于是就研究了一下bootstrap模態(tài)框的實(shí)現(xiàn)原理。2014-05-05
CSS實(shí)現(xiàn)簡(jiǎn)單的圖片防盜鏈代碼
CSS實(shí)現(xiàn)簡(jiǎn)單的圖片防盜鏈代碼...2006-09-09
這篇文章主要介紹了什么是Unicode,什么是UTF-82006-10-10
CSS代碼縮寫技巧...2006-09-09
這篇文章主要介紹了CSS hack用法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
不同版本IE使用不同css(css條件注釋語(yǔ)句用法)
本文講的是利用if來(lái)判斷用戶瀏覽器不同版本IE使用不同css，下面總結(jié)一些針對(duì)IE6、7、8條件注釋語(yǔ)句用法2013-11-11
關(guān)于HTML的語(yǔ)義化標(biāo)簽和無(wú)語(yǔ)義化標(biāo)簽
這篇文章主要介紹了關(guān)于HTML的語(yǔ)義化標(biāo)簽和無(wú)語(yǔ)義化標(biāo)簽,語(yǔ)義化的標(biāo)簽，旨在讓標(biāo)簽有自己的含義，讓瀏覽器認(rèn)識(shí)這個(gè)標(biāo)簽所傳達(dá)的信息，是干什么的有什么作用,需要的朋友可以參考下2023-04-04
不用float實(shí)現(xiàn)模塊居中布局...2006-09-09