文字水平对齐

效果如图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="reset.css"/>
    <style>
        .hotsearch{
            margin: 50px auto;
        }
        .hotsearch dd{
            float: left;
            line-height: 24px;
            border: 1px solid #a8a8a8;
            margin-right: 30px;
            overflow: hidden;
            text-align: center;
            width: 4em; /*这个值是看最长能显示几个文字，如x，则为x em*/
            margin-top: 5px;
        }
        .hotsearch dd a{
            color: #a8a8a8;
            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; /*同上*/
        }
        td{
            width: 4em;
            margin-right:2em;
            text-align: justify;
        }
    </style>
</head>
<body>
    <dl class="hotsearch" style="width:300px;">
        <dt><strong>热门搜索</strong></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>
</body>
</html>

 

posted @ 2016-02-29 15:09  黑客PK  阅读(507)  评论(0)  编辑  收藏  举报