如果把最后一行P标签换成li全部都显示不出来。咋回事
日期：2014-05-17 浏览次数：20592 次
如果把最后一行P标签换成li全部都显示不出来。怎么回事？
<style>
body{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Geneva, sans-serif "宋体"; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p{padding:0px; margin:0px;}
ul{ list-style:none;}
img{ border:0px;}
a{ color:#ffffff; text-decoration:none;}
a:hover{ color:#C99;}
.whole{ width:1423px;}
.top { background-color:#980808; line-height:29px;}
.top ul li{ float:left;}
</style>
</head>
<body>
<div class="whole">
<div class="top">
<ul>
<li><a href="#">尚品519欢迎您</a></li>
<li><a href="#">购物车0件</a></li>
<li><a href="#">去结算</a></li>
<li><a href="#">登录|</a></li>
<li><a href="#">注册|</a></li>
<li><a href="#">我的订单|</a></li>
<p><a href="#">进入用户中心</a></p>
</ul>
</div>
</div>
</body>
------解决方案--------------------
不是没显示出来，显示出来 a 是 白色，所以感觉没显示。
原因是 top 下面的子元素浮动了，导致了top的背景失效了，解决这个问题需要这样
<style>
body{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Geneva, sans-serif "宋体"; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p{padding:0px; margin:0px;}
ul{ list-style:none;}
img{ border:0px;}
a{ color:#ffffff; text-decoration:none;}
a:hover{ color:#C99;}
.whole{ width:1423px;}
.top { background-color:#980808; line-height:29px;}
.top ul li{ float:left;}
</style>
</head>
<body>
<div class="whole">
<div class="top">
<ul>
<li><a href="#">尚品519欢迎您</a></li>
<li><a href="#">购物车0件</a></li>
<li><a href="#">去结算</a></li>
<li><a href="#">登录|</a></li>
<li><a href="#">注册|</a></li>
<li><a href="#">我的订单|</a></li>
<p><a href="#">进入用户中心</a></p>
</ul>
</div>
</div>
</body>
------解决方案--------------------
不是没显示出来，显示出来 a 是 白色，所以感觉没显示。
原因是 top 下面的子元素浮动了，导致了top的背景失效了，解决这个问题需要这样
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
body{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Geneva, sans-serif "宋体"; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p{padding:0px; margin:0px;}
ul{ list-style:none;}
img{ border:0px;}
a{ color:#ffffff; text-decoration:none;}
a:hover{ color:#C99;}
.whole{ width:1423px;}
.top { background-color:#980808; line-height:29px;}
.top ul li{ float:left; width:100px;}
/* 清除浮动 */
.clear { *zoom:1; }
.clear:before, .clear:after{
display:block; content:'clear'; clear:both; height:0; overflow:hidden;
}
</style>
</head>
<body>
<div class="whole">
<div class="top clear">
<ul>
<li><a href="#">尚品519欢迎您</a></li>
<li><a href="#">购物车0件</a></li>
<li><a href="#">去结算</a></li>
<li><a href="#">登录|</a></li>
<li><a href="#">注册|</a></li>
<li><a href="#">我的订单|</a></li>
<li><a href="#">进入用户中心</a></li>
</ul>
</div>
</div>
</body>
</html>
------解决方案--------------------
小佳佳 注意结贴率哦 哈哈，要不就拉入黑名单了哦 问题都给你解决了 还不结贴. 打屁股 不解释
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
