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>  
原文地址:https://www.cnblogs.com/qhhw/p/7122179.html