各位大神,小弟有一事不明,望大神指点一二,小弟在此谢过了!
废话少说,请看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
/*css reset*/
body,div{margin:0;padding:0;font-family: "微软雅黑";font-size: 12px;}
a{text-decoration: none;}
/*my Css*/
.oBox{width:60%;margin: 30px auto;padding:0 10px;background-color: #f3f3f3;line-height: 48px;}
.selecItem{display: inline-block;*display: inline;font-size: 12px;line-height: 2em;vertical-align: middle;color:#000;margin-right: 10px;}
.selecItem em{font-style: normal;color:#a99b96;}
.moreItem{color: #ff9900;font-size: 12px;line-height: 4em;float: right;}
.moreItem em{font-style:normal;background-color:#ff9900;padding:0px 3px;color:#fff;margin-left: 4px;border-radius: 2px;}
</style>
</head>
<body>
<div class="oBox">
<a class="selecItem" href="javascript:void(0)">今日新单<em>(44)</em></a>
<a class="selecItem" href="javascript:void(0)">美食<em>(298)</em></a>
<a class="selecItem" href="javascript:void(0)">娱乐<em>(140)</em></a>
<a class="selecItem" href="javascript:void(0)">美容<em>(99)</em></a>
<a class="selecItem" href="javascript:void(0)">生活服务<em>(85)</em></a>
<a class="selecItem" href="javascript:void(0)">酒店<em>(413)</em></a>
<a class="selecItem" href="javascript:void(0)">电影<em>(34)</em></a>
<a class="selecItem" href="javascript:void(0)">旅游<em>(77)</em></a>
<a class="selecItem" href="javascript:void(0)">更多<em>(93)</em></a>
<a class="moreItem" href="javascript:void(0)">更多<em>▼</em></a>
</div>
</body>
</html>
为什么在IE7下class为moreItem的超链接和class为selecItem的超链接不在同一行?
如下图所示:
selecItem要float:left,反正就是一个左边一个右边,不然就会出现你说的那种情况