How can CSS align unequal characters up and down?

How can CSS align unequal characters up and down?

Final effect:

<Div class = "main"> <span style = "font-size: 12px;"> <dl class = "hotsearch" style = "width: 300px; "> <dt> popular search </dt> <dd> <a href =" # "target =" _ blank "ref =" nav "class =" w3 "> TV set </a> </dd> <a href = "#" target = "_ blank" ref = "nav" class = "w4"> sexy and beautiful </a> </dd> <a href = "#" target = "_ blank" ref = "nav" class = "w3"> high heels </a> </dd> <dd> <a href = "#" target = "_ blank" ref = "nav" class = "w2"> mobile phone </a> </dd> <a href = "#" target = "_ blank" ref = "nav" class = "w2"> alignment </a> </dd> <a href =" # "target =" _ blank "ref =" nav "class =" w3 "> jeans </a> </dd> <a href =" # "target = "_ blank" ref = "nav" class = "w4"> Xiao Jia biyu </a> </dd> <a href = "#" target = "_ blank" ref = "nav" class = "w2"> Home </a> </dd> </dl> </span> </div>

<Style type = "text/css">. hotsearch dd {float: left; line-height: 24px; margin-right: 30px; overflow: hidden; text-align: center; width: 4em; /* This value indicates the maximum length of several characters that can be displayed. For example, x indicates x em */}. hotsearch dd a {display: block ;}. w2 {letter-spacing: 2em;/* if you need to align both ends of y words, it is (x-y)/(Y-1), here is (4-2) /(2-1) = 2em */margin-right:-2em;/* same as above */}. w3 {letter-spacing: 0.5em;/* if you need to align both ends of y words, it is (x-y)/(Y-1), here is (4-3) /(3-1) = 0.5em */margin-right:-0.5em;/* same as above */} </style>

From: http://www.cnblogs.com/huhunet/p/6478649.html