不定长度导航的两端对齐

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>

效果如图:

时间: 2024-07-30 10:13:46

不定长度导航的两端对齐的相关文章

Bootstrap两端对齐的导航实例

Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 两端对齐的导航元素</title> <style> .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav:before, .nav:after { display: table;content:

关于文本两端对齐的处理!

<div> <p>对照组1:文档流<span></span></p> <p>对照组2:两端对齐(本组支持谷歌)<span></span></p> <p>对 照 组3:两 端 对 齐 ( 本 组 支 持 谷 歌.火狐 .IE9+)<span></span></p> <p>对照组4:我们不保证内容的正确性.通过使用本站内容随之而来的风险与本站无

Text Justification 实现两端对齐功能

实现office word中的两端对齐功能. 只有个单词时,右边补齐空格.最后一行每个词间一个空格,整下的空格右边补齐.给定字符串,和每行的字符数L.进行两端对齐输出. 我的思路是写一个函数,给定相应的参数就返回该行的string.然后在主函数里只要负责给参数就好了.参数包括words字符串数组本身,然后每个字符串的长度数组.开始start记录从字符串数组只的那个词开始,end记录到哪个词结束.L就是每行的最大字符数.在子函数里实现如果是最后一个单词了,那么就每个词空一个空格.其余后面补齐.在主

浏览器中上面三个字,下面两个字 两端对齐(转)

HTML + CSS短标题(二,三,四文字长度)两端对齐的方式 这篇文章的讲的主要是关于一行横向排列内容,而又包含前面标题并且要求它的文字两端对齐的一种方法.如下图,网上有很多方法,但是经过我测试,基本 没有一种方法能通过所有浏览器测试.而以下这种方法则兼容了大多数主流浏览器(ie6.7.8.9,ff,chrome,safari). 重点:必须定义标题的字体,这里我们设置字体为simsun:.在三个字的标题,这里使用两个  当作一个汉字的宽度.而对于两 个字的标题,我们利用把输入法切换到全角的情

不同浏览器下兼容文本两端对齐

在form表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如: 比较粗暴的做法是在需要隔离边距的文本中加标签,然后分别控制每个文字的边距,这种方法比直接加空格或者占位符更精准,我之前也都是这么做的.但是写的多了之后开始思考能不能抽象出来用于更多的场景?让代码更好看一些?维护成本更低一些? 1.首先想到是能不能直接靠css解决问题 css .test-justify { text-align: justify; } html <div class="test-justify&qu

如何实现文字两端对齐?

输入框左侧的文字有时候长度不一致 ,但是文字无论左对齐还是右对齐都不好看,如下图所示: 但是两端对齐就会和谐很多,如下图: 实现两端对齐方只需一行代码:text-align-last: justify; 原文地址:https://www.cnblogs.com/hj0711/p/9203080.html

怎样实现完美两端对齐/齐头尾功能——hyphenjs

因为之前代码写得太乱了.最近在重写,忘了开分支.有兴趣查看之前代码的朋友可以重置回c8034eb这个commit之前的代码看.重写完成后会重写一篇文章,抱歉啦. 前言 话不多说,先上图.后者红框里是浏览器默认的文本排版,右侧会有锯齿(至于难不难看就见仁见智啦哈哈).前者是使用自己开发的hyphenjs后的文本排版,整齐得像一块豆腐块!对于一个处女座来说,简直舒心了很多.去看看这个神奇的hyphenjs 应用场景 不会无缘无故的造轮子.在日常工作需求中,设计师丢给你一个PSD,发现里面的文本是两端

探索发现:CSS实现中文两端对齐

今天在搜索"CSS实现中文两端对齐"的解决方法时,偶然发现了这个hack: 我遇到问题是:看不到效果,无论是英文还是中文,在IE和chrome下都不起作用.还好在StackOverflow上找到了解决方法 :) 样式: div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px; } div.justify > span

模拟公交站台竖直排列,两端对齐

今天看到一个公家车站台的公家站牌,对站名的排列方式很有兴趣,html和css没有提供文字竖直排列的简便方法,需要我们利用一些技巧才能完成  大概要的效果就是这样的,竖直排列,两端对齐 首先先对竖直排列进行设计 先上html代码: 1 <ul> 2 <li><b>站牌1</b></li> 3 <li><b>站牌2</b></li> 4 <li><b>长站牌3</b>