首页 > 其他 > 详细

不确定宽度元素居中

时间:2015-12-17 15:35:12      阅读:120      评论:0      收藏:0      [点我收藏+]

方法一

<div class="wrap">
		<table>
			<tbody>
				<tr>
					<td>
						<ul>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

  

.wrap{width: 1000px;height: 300px;margin: 0 auto;}
table{margin: 0 auto;}
li{float: left;margin-right: 5px;}
table可以在不确定宽度的情况下用margin:0 auto;但用了一些无意义的标签。

  

方法二

	<div class="wrap">
		<ul>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
	</div>
.wrap{width: 500px;height: 300px;}
ul{text-align: center;}
li{display: inline;}

主要问题就是li设置成了inline.不能设置宽高

  

方法三

	<div class="wrap">
		<ul>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
	</div>
.wrap{width: 500px;height: 300px;}
ul{position: relative;left: 50%;clear: both;float: left;}
li{position: relative;left: -50%;display: inline;}
有点麻烦额。。

  

 

不确定宽度元素居中

原文:http://www.cnblogs.com/wz0107/p/5054031.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!