前几天帮人改一个网站的界面,页码的部分要能自动适应内容的长度,还要居中。由于页码部分的<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