不定长度导航的两端对齐

Posted 橙云生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不定长度导航的两端对齐相关的知识,希望对你有一定的参考价值。

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>

 效果如图:

以上是关于不定长度导航的两端对齐的主要内容,如果未能解决你的问题,请参考以下文章

css实现两端对齐

Android 自定义TextView实现文字两端对齐

如何在Latex中插入伪代码

不定宽块状元素居中方法

UGUI实现文字两端对齐

text-align: justify两端对齐布局