CSS实现多行文字两端对齐的效果
CSS实现多行文字两端对齐的效果
文章来源:本站原创 浏览次数:248 发布日期:2013-09-13
在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型。
一般对齐就是在中间打空格或者用 来空开,但是效果并不好,兼容性有问题,造成不美观。经过一番折腾,
找到了比较好的办法解决。利用letter-spacing来解决:
letter-spacing 属性增加或减少字符间的空白(字符间距)。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。
以下是实现的代码,可以复制下来在本地运行看效果,还不错额。
效果图:
<style type="text/css">.hotsearch dd{
float: left;
line-height: 24px;
margin-right: 30px;
overflow: hidden;
text-align: center;
width: 4em; /*这个值是看最长能显示几个文字,如x,则为x em*/
}.hotsearch dd a{
display:block;
}.w2{
letter-spacing:2em; /*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-2)/(2-1)=2em */
margin-right:-2em; /*同上*/
}.w3{
letter-spacing:0.5em; /*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-3)/(3-1)=0.5em */
margin-right:-0.5em; /*同上*/
}</style>
<dl class="hotsearch" style="width:300px;"><dt>热门搜索</dt><dd><a href="#" target="_blank" ref="nav" class="w3">电视机</a></dd><dd><a href="#" target="_blank" ref="nav" class="w4">性感漂亮</a></dd><dd><a href="#" target="_blank" ref="nav" class="w3">高跟鞋</a></dd><dd><a href="#" target="_blank" ref="nav" class="w2">手机</a></dd><dd><a href="#" target="_blank" ref="nav" class="w2">对齐</a></dd><dd><a href="#" target="_blank" ref="nav" class="w3">牛仔裤</a></dd><dd><a href="#" target="_blank" ref="nav" class="w4">小家碧玉</a></dd><dd><a href="#" target="_blank" ref="nav" class="w2">家居</a></dd></dl>
CSS实现多行文字两端对齐的效果相关推荐
- css小技巧(文字两端对齐)
<label>姓名<i></i></label> label {display: inline-block;width: 100px;text-alig ...
- html中单行文本,利用css实现单行文本文字两端对齐
日常使用中我们可以用 text-align: justify; 实现文本两端对齐效果. 但是该属性有一个问题,不支持单行文本的两端对齐,只有达到2行或者以上才会有效. 所以需要采用下面两种方法实现单行 ...
- css 文字两端对齐
1.需求是这样的:用div+css实现一个表单,要求表单中,输入框前面的label文字都两端对齐,效果如下: 2.先贴出html代码: <div class="item-box&quo ...
- css两端对齐不起作用?真正可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify; text-justify:in ...
- 真正可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify;text-justify:int ...
- div+css如何让一行内的文字两端对齐?
css如何让一行内的文字两端对齐? text-align:justify;. text-justify语法:text-justify : auto |inter-word | newspaper | ...
- CSS中实现文字两端对齐的方法,登陆注册界面经常用到
在写登陆或注册界面时,经常会遇到文字两端对齐(word中有类似对齐方式)的问题,如下图: 用户名和密码并没有两端对齐,那么该怎样处理 其实只需要两行CSS代码就可以解决: 关键两行是:text-ali ...
- html文字左右自动对齐,小技巧:CSS如何实现文字两端对齐
原标题:小技巧:CSS如何实现文字两端对齐 需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么 ...
- css如何实现文字两端对齐,CSS实现文字两端对齐的方法是什么
CSS实现文字两端对齐的方法是什么 发布时间:2020-08-31 14:13:18 来源:亿速云 阅读:76 作者:小新 小编给大家分享一下CSS实现文字两端对齐的方法是什么,希望大家阅读完这篇文章 ...
最新文章
- 「九章」量子计算优越性遭北大院士质疑,潘建伟陆朝阳长文回应
- 通过注册表修改默认浏览器设置
- pytorch 按维取数据
- Effective C# Item23:避免返回内部类对象的引用
- CentOS6配置部署Zabbix监控
- -bash: wget: 未找到命令_18个堪称神器的命令行工具,高效运维必备
- Android Studio(12)----Git使用教程之本地仓库的基本操作
- Opengl_9_复合变换
- NSCache使用常见错误
- linux命令(44):sed,vim;去掉文件中的^M 符号,去掉行首空格和制表符
- html5 制作书架展示 PHP,基于HTML5 Canvas的CSG构造实体几何书架
- RANSAC算法实现图像全景拼接
- Python基础--魔法方法()运算符重载)
- 正式开赛|2023年“桂林银行杯”数据建模大赛暨全国大学生数学建模竞赛广西赛区热身赛
- 常用sql语句(备忘)
- HBM MM CDM Latch-Up
- Vector 自定义Sort
- 我的大数据学习知录(1)-Hadoop
- 很贴心的一份,适合非科班入门计算机的课程路线
- SpringBoot + Spring Cloud +Vue 管理系统后台搭建(七、业务代码通用CURD实现)