li 元素標簽之間的空隙是怎么回事，求解~~
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="gb2312">
? ? <title>實踐題 - 選項卡</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實現(xiàn)選項卡切換
? ? 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頁面布局 -->
<div id="container">
<!--ul...li選項卡-->
<ul>
<li>房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
<!--下邊對應三個內(nèi)容-->
<div>
<p>275萬購昌平鄰鐵三居 總價20萬買一居</p>
<p>200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</p>
<p>北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</p>
<p>京樓盤直降5000 中信府 公園樓王現(xiàn)房</p>
</div>
<div>
<p>40平出租屋大改造 美少女的混搭小窩</p>
<p>經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</p>
<p>新中式的酷色溫情 66平撞色活潑家居</p>
<p>瓷磚就像選好老婆 衛(wèi)生間煙道的設計</p>
</div>
<div>
<p>通州豪華3居260萬 二環(huán)稀缺2居250w甩</p>
<p>西3環(huán)通透2居290萬 130萬2居限量搶購</p>
<p>黃城根小學學區(qū)僅260萬 121平70萬拋!</p>
<p>獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬</p>
</div>
</div>
?
</body>
</html>
2015-10-04
行框的排列會受到中間空白（回車空格等等）的影響，這些空白也會被應用樣式，占據(jù)空間，所以會有間隔
2017-11-13
font-size=0這個方法樓上已經(jīng)有人答了(記得ul元素設置font-size:0后li元素重置回來比如 li {font-size: 14px}), 另外一種解決方案: ul {lette-spacing: -1em;} li {letter-spacing: normal}; 某些情況下, 后面這種方法更實用 :)? 源自StackOverflow:?https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items
2016-09-12
空白節(jié)點（多由于Enter造成），li不換行就可以解決問題。Internet Explorer會忽略節(jié)點之間生成的空白節(jié)點，其它瀏覽器不會忽略（可以通過檢測節(jié)點類型，過濾子節(jié)點）。
2016-08-31
html代碼別換行 把li全部寫在一行就行 ? font-size=0在某些瀏覽器可能會有異常
2016-07-26
牛666666
2015-10-28
在ul標簽中設置font-size=0,在li中設置標簽文字的大??；因為空格也屬于字符，把字符大小設為0，就沒有空格了。