HTML + CSS短标题（二，三，四文字长度）两端对齐的方式

Posted on 2017-07-05 16:40  武奘  阅读(569)  评论(0)  编辑  收藏  举报

  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. width: 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="width:300px;">  
  2. <dt>热门搜索</dt>  
  3. <dd><a href="#" target="_blank" ref="nav" class="w3">电视机</a></dd>  
  4. <dd><a href="#" target="_blank" ref="nav" class="w4">性感漂亮</a></dd>  
  5. <dd><a href="#" target="_blank" ref="nav" class="w3">高跟鞋</a></dd>  
  6. <dd><a href="#" target="_blank" ref="nav" class="w2">手机</a></dd>  
  7. <dd><a href="#" target="_blank" ref="nav" class="w2">对齐</a></dd>  
  8. <dd><a href="#" target="_blank" ref="nav" class="w3">牛仔裤</a></dd>  
  9. <dd><a href="#" target="_blank" ref="nav" class="w4">小家碧玉</a></dd>  
  10. <dd><a href="#" target="_blank" ref="nav" class="w2">家居</a></dd>  
  11. </dl></span>  

Copyright © 2024 武奘
Powered by .NET 9.0 on Kubernetes