表单短标题不同字数两端对齐问题

10次阅读

共计 1125 个字符,预计需要花费 3 分钟才能阅读完成。

方法一:利用 letter-spacing 属性和 em
参考:https://blog.csdn.net/muyutin…
html
<span style=”font-size:12px;”><dl class=”hotsearch” style=”width: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>

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>
}

方法二:利用透明字占位
<text style=”opacity: 0;”> 空格 </text>

方法三:利用两端对齐属性
text-align:justify;
width:100px;

正文完
 0