CSS如何让不相等的字符上下对齐
2024-08-26 23:11:48
最后效果:
<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
最新文章
- category - junit用例分组执行
- GitLab常见使用方法
- 第十二章:使用FP-growth算法进行关联分析
- 【web必知必会】—— 使用DOM完成属性填充
- h5-2
- asp.net文本编辑器(FCKeditor)
- Swift编程语言的相关资料
- Android工程师面试准备知识点
- 了解你的家公家IP
- Tsinsen-1486:树【Trie树 + 点分治】
- Spring context:component-scan代替context:annotation-config
- c# 【MVC】WebApi通过HttpClient来调用Web Api接口
- Pycharm使用教程(四)-安装python依赖包(非常详细,非常实用)
- Linux三个网络监视器之《二》——nethogs
- leetcode34
- resultMap自定义某个javaBean的封装规则代码
- SDOI2018IIIDX
- 通过代码动态创建IIS站点
- 错误Name node is in safe mode的解决方法 (转)
- Googlebot (Google Web search)
热门文章
- 将Linux(ubuntu)安装到U盘上,实现即插即用
- C3P0连接池、DBCP连接池
- ElasticSearch 工具类封装(基于ElasticsearchTemplate)
- 多个git使用的 ssh key共存
- [视频]K8飞刀 HackerIE自动检测网站注入教程
- TCP/IP 笔记 - 超时和重传
- 为springboot项目添加springboot-admin监控
- leetcode — merge-k-sorted-lists
- 函数调用的区别:_cdecl以及_stdcall
- Deep Reinforcement Learning: Pong from Pixels