之前解決的一個小問題，讓橫排的列表可以左右對齊。相關代碼如下：
==================HTML==========================
<div class="overdiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
=================================================
==================CSS==========================
.overdiv{
width:290px;
height:300px;
overflow:hidden;
background-color:#436973;
}
.overdiv ul{
list-style:none;
width:320px;
height:auto;
}
.overdiv li{
float:left;
width:80px;
height:80px;
margin-right:25px;
margin-bottom:5px;
background-color:#83B1DF;
text-align:center;
line-height:80px;
}
=================================================
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="utf-8" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<title>橫排列表(li)的左右對齊</title>
<style type="text/css">
/*<![CDATA[*/
*{
margin:0;
padding:0;
}
.overdiv{
width:290px;
height:300px;
overflow:hidden;
background-color:#436973;
}
.overdiv ul{
list-style:none;
width:320px;
height:auto;
}
.overdiv li{
float:left;
width:80px;
height:80px;
margin-right:25px;
margin-bottom:5px;
background-color:#83B1DF;
text-align:center;
line-height:80px;
}
/*]]>*/
</style>
</head>
<body>
<div class="overdiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html>
暂无评论