li 元素標(biāo)簽之間的空隙是怎么回事，求解~~
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="gb2312">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ?* { margin:0px; padding:0px;}
#container {
margin:20px auto;
width:300px;
height:170px;?
}
#container ul {
list-style:none;
margin:10px auto 0px;
width:280px;
height:32px;
border-bottom:2px solid #7E2F00;
}
#container ul li {?
display:inline-block;?
width:70px;?
text-align:center;?
line-height:30px;
margin-left:5px;
border:1px solid #B2B0AA;
border-bottom:none;
}
#container ul li.current {
border-top:2px solid #7E2F00;
border-bottom:2px solid #ffffff;
}
#container ul li:hover{
cursor:pointer;
}
? ? ? ? #container .display {
margin:0px auto;
width:278px;
height:120px;
border:1px solid blue;
border-top:none;
}
#container .display p{
padding:7px;
font-size:13px;
}
#container .hide{
display:none;
}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實(shí)現(xiàn)選項(xiàng)卡切換
? ? window.onload = function(){
var li = document.getElementsByTagName("li");
for(var i=0; i<li.length; i++){
li[i].index=i;
li[i].setAttribute("onclick","clk(this)");
}
}
function clk(o){
// console.log(o.index);
var li = document.getElementsByTagName("li");
for(var i=0; i<li.length; i++){
li[i].className = "";
}
o.className = "current";
var ndiv = document.getElementsByTagName("div");
// console.log(ndiv.length);
for(var j=1; j<ndiv.length; j++){
ndiv[j].className="hide";
}
var k=o.index+1;
// console.log(k);
ndiv[k].className="display";
}
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="container">
<!--ul...li選項(xiàng)卡-->
<ul>
<li>房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
<!--下邊對(duì)應(yīng)三個(gè)內(nèi)容-->
<div>
<p>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</p>
<p>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</p>
<p>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</p>
<p>京樓盤直降5000 中信府 公園樓王現(xiàn)房</p>
</div>
<div>
<p>40平出租屋大改造 美少女的混搭小窩</p>
<p>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</p>
<p>新中式的酷色溫情 66平撞色活潑家居</p>
<p>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</p>
</div>
<div>
<p>通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</p>
<p>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</p>
<p>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</p>
<p>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</p>
</div>
</div>
?
</body>
</html>
2015-10-04
行框的排列會(huì)受到中間空白（回車空格等等）的影響，這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔
2017-11-13
font-size=0這個(gè)方法樓上已經(jīng)有人答了(記得ul元素設(shè)置font-size:0后li元素重置回來(lái)比如 li {font-size: 14px}), 另外一種解決方案: ul {lette-spacing: -1em;} li {letter-spacing: normal}; 某些情況下, 后面這種方法更實(shí)用 :)? 源自StackOverflow:?https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items
2016-09-12
空白節(jié)點(diǎn)（多由于Enter造成），li不換行就可以解決問(wèn)題。Internet Explorer會(huì)忽略節(jié)點(diǎn)之間生成的空白節(jié)點(diǎn)，其它瀏覽器不會(huì)忽略（可以通過(guò)檢測(cè)節(jié)點(diǎn)類型，過(guò)濾子節(jié)點(diǎn)）。
2016-08-31
html代碼別換行 把li全部寫在一行就行 ? font-size=0在某些瀏覽器可能會(huì)有異常
2016-07-26
牛666666
2015-10-28
在ul標(biāo)簽中設(shè)置font-size=0,在li中設(shè)置標(biāo)簽文字的大小；因?yàn)榭崭褚矊儆谧址?，把字符大小設(shè)為0，就沒(méi)有空格了。