前几天帮人改一个网站的界面,页码的部分要能自动适应内容的长度,还要居中。由于页码部分的<div>是嵌套在另一个<div>只内的,他们的前端能作出自动长度,但是只能左对齐,用的<div style="float: left;">,说是<div style="float: center;">无效,我试了一下,的确<div style="float: center;">没有效果,网上找了一下发现很多说的方法也是float: left;,其他的用JS 的实现的没试过(我的JS的确不咋的,也懒得试了)。
但是我发现如果现在<div>里放一个table的话table设置为center是可以实现居中的,然后我就把页码的<div>放在了table里,用table来控制居中,用了这样的方法来实现自动的长度和居中。模拟代码如下
(转载请注明出处http://blog.csdn.net/wwwqqeew)
<!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">
#RR {
height: 400px;
width: 700px;
border-color:#000000;border-style:solid;
}
#R1 {
height: 200px;
width: auto;
border-color:#FF6347;border-style:solid;
}
#R21 {
height: 20px;
width: auto;
border-color:#FF6347;
border-style:solid;
text-align:center;
margin-bottom:opx;}
}
</style>
</head>
<body>
<div id="RR">
<div id="R1">显示新 Div 标签的内容</div>
<table width="auto" border="1" align="center">
<tr>
<td><div id="R21" style="float: left;">这里是加了table的</div></td>
</tr>
</table>
</div>
</body>
</html>
转载请注明出处http://blog.csdn.net/wwwqqeew