<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
ul {
background-color: #F00;
width: 195px;
list-style: none;
margin: 0px;
padding:5px;
overflow: hidden;
}
li {
float:left;
display: block;
width:50px;
height: 60px;
margin:5px;
border: 1px solid #FFF;
}
</style>
</head>
<body>
<ul>
<li>111<br />111<br />111</li>
<li>111<br />111<br />111</li>
<li>111<br />111<br />111</li>
<li>111<br />111<br />111</li>
</ul>
</body>
</html>
2011年4月2日
相簿或產品列表的html和css
li float left 之後 ul 就會瞇成一條線了，所以我們替ul 加上overfloat hidden，讓ul可以隨產品增加向下伸展版面，提醒大家：在實際組合入版面的時候，記得一定要設上 ul 寬度，不然會出線多餘的空間。
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言