首页 > 其他 > 详细

不定长度导航的两端对齐

时间:2017-09-20 11:09:00      阅读:239      评论:0      收藏:0      [点我收藏+]

1.导航按钮的字数不固定  有长有短,且个数不确定。布局比较麻烦。

2.利用flex 进行布局。兼容性还是比较差,不太稳定,确保flex生效的前提下 ,不失为快速有效的办法,也比较推荐。

3.利用行内元素的两端对齐

<html>

	<head>
		<title></title>
		<meta charset="UTF-8" />
	</head>
	<style>
		.nav_list {
			width: 800px;
			border: 1px solid red;
			text-align: justify;
			text-align-last: justify;
		}
		
		.nav_list a {
			/*text-align: center!important;*/
			display: inline-block;
			border-radius: 24px;
			color: #FFF;
			background: #561605;
			padding: 5px 20px;
			text-decoration: none;
		}
	</style>

	<body>
		<div class="nav_list">
			<a href="#index1">首页</a>
			<a href="#index2">技术研发团队</a>
			<a href="#index3">联系</a>
			<a href="#index4">关于我们</a>
			<a href="#index5">我是五个字</a>
		</div>
	</body>

</html>

 效果如图:

技术分享

不定长度导航的两端对齐

原文:http://www.cnblogs.com/chengyunshen/p/7560220.html

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