The two ends of the form short title (2, 3, 4 words) are aligned-HTML + CSS, and css

The two ends of the form short title (2, 3, 4 words) are aligned-HTML + CSS, and css

Source: http://blog.csdn.net/muyutingfeng2008/article/details/48263073,HTML + CSS short title (two, three, four text length) at both ends of the alignment

 

During the frontend interface, for example, some text lists or the headers of some forms are usually 2 words, 3 words, and 4 words.

In general, alignment is to place spaces in the middle or use & nbsp; to open the space. However, the effect is not good and the compatibility is problematic, resulting in poor appearance. After some hard work,

Found a better solution. Use letter-spacing to solve the following problems:

The letter-spacing attribute adds or removes spaces (Character spacing) between characters ).

This attribute defines how much space is inserted between text character boxes. Because the font is usually narrower than its character box, the normal interval between letters is adjusted when the length value is specified. Therefore, normal is equivalent to 0.

 

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

 

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