為什么我的會出現(xiàn)這種情況？字體不對齊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font: normal 12px "微軟雅黑";
color: #000000;
}
ul {
list-style-type: none;
}
#tab-list {
width: 275px;
height: 190px;
margin: 20px auto;
}
#ul1 {
border-bottom: 1px solid #8B4513;
height: 32px;
}
#ul1 li {
display: inline- block;
width: 60px;
line-height: 30px;
text-align: center;
border: 1px solid #999;
border-bottom: none;
margin-left: 5px;
float: left
}
#ul1 li.active {
border-top: 2px solid #8B4513;
border-bottom: 2px solid #FFFFFF;
}
#tab-list div {
border: 1px solid #7396B8;
border-top: none;
}
#tab-list div li {
font-size: 8px;
height: 30px;
line-height: 30px;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
? ? function ?b1() {
var cd = document.getElementById("ul1");
var caidan = cd.getElementsByTagName("li");
var i;
var div = document.getElementsByTagName("div");
for (i = 0;i<caidan.length;i++){
if (caidan[i].className == "active")
temp = i;
}
caidan[temp].className="";
caidan[0].className="active";
div[1].className="";
div[2].className="hide";
div[3].className="hide";
}
function ?b2() {
var cd = document.getElementById("ul1");
var caidan = cd.getElementsByTagName("li");
var i;
var div = document.getElementsByTagName("div");
for (i = 0;i<caidan.length;i++){
if (caidan[i].className == "active")
temp = i;
}
caidan[temp].className="";
caidan[1].className="active";
div[1].className="hide";
div[2].className="";
div[3].className="hide";
}
function ?b3() {
var cd = document.getElementById("ul1");
var caidan = cd.getElementsByTagName("li");
var i;
var div = document.getElementsByTagName("div");
for (i = 0;i<caidan.length;i++){
if (caidan[i].className == "active")
temp = i;
}
caidan[temp].className="";
caidan[2].className="active";
div[1].className="hide";
div[2].className="hide";
div[3].className="";
}
</script>
</head>
<body>
<div id="tab-list">
<ul id="ul1">
<li class="active" onmouseover="b1()" >1</li>
<li ?onmouseover="b2()">2</li>
<li ?onmouseover="b3()">3</li>
</ul>
<div style="clear: both">
<ul>
<li>275萬購昌平鄰鐵三居 總價20萬買一居</li>
<li>200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</li>
<li>北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</li>
<li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
</ul>
</div>
<div class="hide">
<ul>
<li>40平出租屋大改造 美少女的混搭小窩</li>
<li>經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</li>
<li>新中式的酷色溫情 66平撞色活潑家居</li>
<li>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計</li>
</ul>
</div>
<div class="hide">
<ul>
<li>通州豪華3居260萬 二環(huán)稀缺2居250w甩</li>
<li>西3環(huán)通透2居290萬 130萬2居限量搶購</li>
<li>黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</li>
<li>獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬</li>
</ul>
</div>
</body>
</html>
2016-10-30
第一個ul的高度為32px+邊框1px=33px；
當(dāng)鼠標(biāo)移到第一個ul里面的li時，li的高度為30px+邊框2+2=34px；因此對應(yīng)的li的高度會超過ul的高度，于是會字體錯位，
為什么第一個li里面的字體不會錯位，因為第一個字體的父元素div設(shè)置了clear:both；清除了第一個ul里面li的浮動，因此整體位置會下移而不是錯位；
修改方法：
方法1、第一個ul里面li的邊框改為1；
方法2、給另外幾個移位字體的div加上clear:both；
還有：代碼最后漏了一個</div>