PROMULGATOR

    michaelJovi

    上海市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
<span style="font-size:12px;"><dl class="search" style="width:100px;">
<dt>查询条件</dt>
<dd><a href="###" ref="nav" class="w3">台式机</a></dd>
<dd><a href="###" ref="nav" class="w3">笔记本</a></dd>
<dd><a href="###" ref="nav" class="w2">手机</a></dd>
<dd><a href="###" ref="nav" class="w2">插板</a></dd>
<dd><a href="###" ref="nav" class="w4">插线盒子</a></dd>
<dd><a href="###" ref="nav" class="w4">系统管理</a></dd>
<dd><a href="###" ref="nav" class="w2">模块</a></dd>
<dd><a href="###" ref="nav" class="w3">菜单栏</a></dd>
</dl></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

CSS不同字数两端对齐

样式设置：

.search dd {
    float:left;
    overflow:hidden;
    text-align:center;
    width:4em;
    /*这个值是看最长显示几个字符，如x，则为x em*/
}

.w2 表示2个字符

.w2 {
    /*一正一负*/
    letter-spacing:2em;
    /*y个字两端对齐，则为(x-y)/(y-1),这里是（4-2）/(2-1)=2em */
    margin-right:-2em;
    /*同上*/
}

.w3 以此类推

0