HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
来源:互联网 发布:云帆翻墙软件 编辑:程序博客网 时间:2024/05/22 13:39
在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型。
一般对齐就是在中间打空格或者用 来空开,但是效果并不好,兼容性有问题,造成不美观。经过一番折腾,
找到了比较好的办法解决。利用letter-spacing来解决:
letter-spacing 属性增加或减少字符间的空白(字符间距)。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。
以下是实现的代码,可以复制下来在本地运行看效果,还不错额。
效果图:
CSS样式:
<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
;
}
.w
2
{
letter-spacing
:
2em
;
/*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-2)/(2-1)=2em */
margin-right
:
-2em
;
/*同上*/
}
.w
3
{
letter-spacing
:
0.5em
;
/*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-3)/(3-1)=0.5em */
margin-right
:
-0.5em
;
/*同上*/
}
</style>
html代码:
<
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
>
0 0
- HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
- HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
- HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
- css文字两端对齐
- css文字两端对齐
- css文字两端对齐
- css文字两端对齐
- css 文字两端对齐
- 真正可用的CSS文字两端对齐
- css实现文字两端对齐(兼容)
- CSS两端对齐方式
- CSS 实现文字两端对齐
- html 文字 justify 两端对齐
- css段落文字(中英文混杂)实现两端对齐
- 文字两端对齐的类
- HTML文本框文字对齐方式(CSS vertical-align 属性)
- css控制文章段落文字两端对齐
- div css 如何让两端文字对齐
- floating point comparsion
- Volley简介
- PHP连接MySQL数据库中文乱码问题解决方法
- 作业3.24
- Eclipse 将JAVADOC附加到JAR(一)
- HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
- 程序员发展规律
- iTOP-4412 开发板的 GPIO 是怎么操作的?
- SAT数学备考7大技巧
- 第一次mark
- 来自知乎 linux的一些玩法
- 黑马程序员——java基础之反射
- 逆向记事本看UTF8编码判断错误(转)
- sort