zoukankan      html  css  js  c++  java
  • HTML + CSS短标题(二,三,四文字长度)两端对齐的方式

    1. <style type="text/css">  
    2. .hotsearch dd{  
    3. float: left;  
    4. line-height: 24px;  
    5. margin-right: 30px;  
    6. overflow: hidden;  
    7. text-align: center;  
    8.  4em; /*这个值是看最长能显示几个文字,如x,则为x em*/  
    9. }  
    10. .hotsearch dd a{  
    11. display:block;  
    12. }  
    13. .w2{  
    14. letter-spacing:2em; /*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-2)/(2-1)=2em */  
    15. margin-right:-2em; /*同上*/  
    16. }  
    17. .w3{  
    18. letter-spacing:0.5em; /*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-3)/(3-1)=0.5em */  
    19. margin-right:-0.5em; /*同上*/  
    20. }  
    21. </style>  
    1. <span style="font-size:12px;"><dl class="hotsearch" style="300px;">  
    2. <dt>热门搜索</dt>  
    3. <dd><href="#" target="_blank" ref="nav" class="w3">电视机</a></dd>  
    4. <dd><href="#" target="_blank" ref="nav" class="w4">性感漂亮</a></dd>  
    5. <dd><href="#" target="_blank" ref="nav" class="w3">高跟鞋</a></dd>  
    6. <dd><href="#" target="_blank" ref="nav" class="w2">手机</a></dd>  
    7. <dd><href="#" target="_blank" ref="nav" class="w2">对齐</a></dd>  
    8. <dd><href="#" target="_blank" ref="nav" class="w3">牛仔裤</a></dd>  
    9. <dd><href="#" target="_blank" ref="nav" class="w4">小家碧玉</a></dd>  
    10. <dd><href="#" target="_blank" ref="nav" class="w2">家居</a></dd>  
    11. </dl></span>  
  • 相关阅读:
    17个Web前端开发工程师必看的国外网站
    CSS 绘制三角形气泡框
    Javascript冒泡事件
    页面文本框的只读属性readonly的设置与使用focus-blur事件方法的区别
    javascript中的类型的准确检测
    认识Console,调试Javascript
    仿美团页面
    EDM开发之四:错误记录
    EDM开发之一:系统概述
    EDM开发之二:SMTP服务器
  • 原文地址:https://www.cnblogs.com/qhhw/p/7122179.html
Copyright © 2011-2022 走看看