找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3494|回复: 2

[讨论] ul宽度问题

[复制链接]
发表于 2010-8-30 15:57:59 | 显示全部楼层 |阅读模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>


<style type="text/css">
body {
    margin:0;
    padding:0;
    font-size:12px;
}

h3 {
    width:388px;
    height:28px;
    margin:20px auto 0 auto;
    border:1px solid #ccc;
    border-width:1px 1px 0 1px;
    font-size:14px;
    color:#03c;
    text-indent:8px;
    line-height:30px;
    background:#f1f1f1;
    overflow:hidden;
}
h3 a {
    color:#03c;
    text-decoration:none;
}
h3 a:hover {
    color:#000;
}

ul {
    width:376px; /*******就是这里的ul宽度 ul的border是1px 每个li是80px,li的border是1px,ul的padding12px,每个li的margin是12px,那么算出来一个是1*2+80*4+1*8+12*5+2=390px,那么我觉得应该设置css宽度是388px,为什么设置的时少12px,才能真确均匀的分布在中间,按照算出来的反而不对呢??******* */
    height:284px;
    margin:10px auto;
    padding:12px 0 0 12px;                
    border:1px solid #ccc;
    border-top-style:dotted;
    list-style:none;
}


ul li {
    float:left;
    margin:0 12px 12px 0;
    display:inline;   
}
ul li a {
    display:block;  
    width:82px;
    height:130px;
    cursor:hand;
    text-decoration:none;
    text-align:center;
    overflow:hidden;  
}

ul li a img {
    width:80px;
    height:80px;
    border:1px solid #ccc;
}

ul li a strong {
    display:block;        
    width:82px;                
    height:30px;
    line-height:15px;
    font-weight:100;
    color:#333;
    overflow:hidden;                 
}
ul li a span {
    display:block;                
    width:82px;                        
    height:20px;
    line-height:20px;
    color:#666;
}
ul li a span em {
    font-style:normal;
    font-weight:800;
    color:#f60;
}

ul li a:hover img {
    border-color:#333;
}
ul li a:hover strong {
    color:#03c;
}
ul li a:hover span em {
    color:#f00;
}

</style>

</head>

<body>
<ul>
    <li><a href="844"><img src="http://www.woaicss.com/works/pic/0.jpg" alt=""/> <strong>澳大利亚高帮鞋纯羊毛/css毛线</strong>    <span>¥<em>25.0</em></span></a></li>
    <li><a href="843"><img src="http://www.woaicss.com/works/pic/2.jpg" alt=""/> <strong>[迎国庆]经典百搭纪念款情侣CSS支持非常好 </strong> <span>¥<em>65.0</em></span></a></li>
    <li><a href="842"><img src="http://www.woaicss.com/works/pic/3.jpg" alt=""/> <strong>优雅甜蜜气质 毛呢配真毛领 机车款外套CSS </strong> <span>¥<em>215.0</em></span></a></li>
    <li><a href="841"><img src="http://www.woaicss.com/works/pic/4.jpg" alt=""/> <strong>超显瘦 韩版九分裤 </strong> <span>¥<em>9.0</em></span></a></li>
    <li><a href="838"><img src="http://www.woaicss.com/works/pic/5.jpg" alt=""/> <strong>抢!双冠促销黄金假期【全CSS列表 </strong> <span>¥<em>120.0</em></span></a></li>
    <li><a href="835"><img src="http://www.woaicss.com/works/pic/6.jpg" alt=""/> <strong>特价!冲4冠 热销万条 超显CSS实例</strong> <span>¥<em>32.0</em></span></a></li>
    <li><a href="834"><img src="http://www.woaicss.com/works/pic/7.jpg" alt=""/> <strong>实拍 抓绒套头帽衫带帽长袖加厚卫衣外套 </strong> <span>¥<em>99.0</em></span></a></li>
    <li><a href="833"><img src="http://www.woaicss.com/works/pic/8.jpg" alt=""/> <strong>庆三冠!零利润纯牛皮女单鞋!销量冲万!人气款CSS优化最佳实践六则 </strong> <span>¥<em>125.0</em></span></a></li>
</ul>
</body>
</html>


就是这里的ul宽度 ul的border是1px 每个li是80px,边框1px,外面padding12px,每个li的margin是12px,那么算出来一个是1*2+80*4+1*8+12*5+2=390px,那么我觉得应该设置css宽度是388px,为什么设置的时少12px,才能真确,按照算出来的反而不对呢??
发表于 2010-8-30 17:58:48 | 显示全部楼层
li border 1px,只考虑左右,那么li宽度就是82px,li的margin-right:12px,82+12=94,94x4=376;算到这里,4个li占据的全部宽度376px,ul padding-left:12px,376+12=388;
但是这里只能写376,如果你写388,就等于388+12;因为ul的宽度是width+padding
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-8-30 21:12:38 | 显示全部楼层

谢谢

谢谢 您的回答!是我概念搞错了,现在懂了,是盒子模型没搞清楚惹的祸
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-2-28 08:50 , Processed in 0.054047 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表