为什么我的会出现这种情况？字体不对齐
<!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万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
<div class="hide">
<ul>
<li>40平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li>新中式的酷色温情 66平撞色活泼家居</li>
<li>瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
<div class="hide">
<ul>
<li>通州豪华3居260万 二环稀缺2居250w甩</li>
<li>西3环通透2居290万 130万2居限量抢购</li>
<li>黄城根小学学区仅260万 121平70万抛!</li>
<li>独家别墅280万 苏州桥2居优惠价248万</li>
</ul>
</div>
</body>
</html>
个回答
-
- stone310
- 2016-10-30 20:19:02
第一个ul的高度为32px+边框1px=33px；
当鼠标移到第一个ul里面的li时，li的高度为30px+边框2+2=34px；因此对应的li的高度会超过ul的高度，于是会字体错位，
为什么第一个li里面的字体不会错位，因为第一个字体的父元素div设置了clear:both；清除了第一个ul里面li的浮动，因此整体位置会下移而不是错位；
修改方法：
方法1、第一个ul里面li的边框改为1；
方法2、给另外几个移位字体的div加上clear:both；
还有：代码最后漏了一个</div>