zoukankan      html  css  js  c++  java
  • HTML + 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;
    }
    .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>
    <span style="font-size:12px;"><dl class="hotsearch" style="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>
  • 相关阅读:
    资源文件打包到Web自定义控件中应用
    .Net中的集合类
    javaScript中URL编码转换,escape() encodeURI() encodeURIComponent
    div 换行
    asp.net 清除缓存OpenShowDialog模式下
    hdu 1787 GCD Again
    ZOJ 1244
    hdu 1255 覆盖的面积
    POJ 2777 Count Color
    POJ 3750 小孩报数问题
  • 原文地址:https://www.cnblogs.com/wei-dong/p/12785859.html
Copyright © 2011-2022 走看看