CSS如何让不相等的字符上下对齐
最后效果:
<div class="main">
<span style="font-size:12px;"><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></span>
</div>
<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>
本文来自:http://www.cnblogs.com/huhunet/p/6478649.html
CSS如何让不相等的字符上下对齐的更多相关文章
- css 字间距离_css 字体字符间距设置
介绍下css 字间距,使用css来控制字与字之间距离,也叫css字间距方法. 使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字间距. Css字间距.div ...
- DIV+CSS 让同一行的图片和文字对齐【转藏】
DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
- 用css布局的方法实现如果字符超过一定长度就显示成省略号
以前实现这种效果需要在程序里判断字符的长度,如果长度大于多少个字符,就截取字符,用省略号代替,而且是在服务器处理的,现在只需要用css的属性来操作,简单.实用.节省性能.不用做过多的程序判断.节约开发 ...
- css一长串连续英文字符的换行
在标签内,中文的换行是没有什么问题的,但英文的换行就有问题.当出现一长串连续的英文字符时,换行就失效了,内容会溢出.解决这个问题只需要一行css就够了: p{ word-wrap: break-wor ...
- CSS中英文字符两端对齐实现
两端对齐实现 一般加上下面2行就可实现 display: inline-block; text-align: justify; 但是对于中英文混杂的情况,中英文难一起实现对齐,原因在下面有分析,需要如 ...
- CSS动画实例:跳跃的字符
1.翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> ...
- css首行缩进2个字符
css设置: p{ text-indent:2em; }
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...
- DIV+CSS 让同一行的图片和文字对齐
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
随机推荐
- JSON笔记整理
JSON简介: JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML ...
- MySQL导入SQL语句报错 : MySQL server has gone away (已解决)
MySQL server has gone away 解决的方法其实很简单,我相信也有很多人遇到了这个问题.比如DZ论坛,安装好服务器,但是清空缓存等操作数据库的动作,运行时间稍长就会出现 MySQL ...
- Android中的EventBus
1.分析 EventBus是一个针对Android的事件发布和订阅的框架,主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间传 ...
- 给JavaScript24条最佳实践
作为“30 HTML和CSS最佳实践”的后续,这篇文章将回顾JavaScript的知识 !如果你看完了下面的内容,请务必让我们知道你掌握的小技巧! 1.使用 === 代替 == JavaScript ...
- nova scheduler filters 配置
scheduler_driver = nova.scheduler.filter_scheduler.FilterScheduler scheduler_default_filters = Avail ...
- xampp/apache启动失败解决方法
我的问题是: 9:15:53 AM [Apache] Error: Apache shutdown unexpectedly.9:15:53 AM [Apache] This may be due ...
- 从理论到实践 全面理解HTTP/2
前言 为了降低加载时间,相信大多数人都做过如下尝试 Keep-alive: TCP持久连接,增加了TCP连接的复用性,但只有当上一个请求/响应完全完成后,client才能发送下一个请求 Pipelin ...
- OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 5.在控制节点上部署计算服务Nova
计算服务Nova使用OpenStack Compute来托管和管理云计算系统. OpenStack Compute是基础架构即服务(IaaS)系统的主要部分. 主要模块用Python实现.OpenSt ...
- Liferay7 BPM门户开发之21: 理解消息总线(Message Bus)体系
Liferay Message Bus提供了松耦合的消息发送接收机制(生产和消费的设计模式),用于本地服务,不支持远程服务,支持集群. 主要用途: 两个或多个插件之间的通讯. 在事件中发送搜索索引,比 ...
- Fiddler怎样抓取手机的包
Fiddler作为代理服务器,可以拦截到手机发出的请求,再经过Fiddler发送到服务器,获取到服务器响应的数据,这个过程,只要设置配置好了,使用过程不受影响. 要想抓取到手机的包,先要给手机设置一个 ...