Horizontal equal spacing

If I have a short sequence of words that are on one line, within the
confines of a fixed width DIV, how can I position them so that the
spaces between the words are all of equal size (with half a space
trailing and leading)? For example,

xxxFIRSTxxxxxxSECONDxxxxxxTHIRDxxxxxxFOURTHxxx

where 'xxxxxx' represents the space.

Andrew Poulos

Andrew Poulos wrote:

If I have a short sequence of words that are on one line, within the
confines of a fixed width DIV, how can I position them so that the
spaces between the words are all of equal size (with half a space
trailing and leading)? For example,

xxxFIRSTxxxxxxSECONDxxxxxxTHIRDxxxxxxFOURTHxxx

where 'xxxxxx' represents the space.

One way is to create a <span> class with equal margin-left and margin-right.

..eq-space span { margin: 0 10%; }
<div class="eq-space"><span>FIRST</span><span>SECOND</span>...</div>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

Andrew Poulos wrote:
If I have a short sequence of words that are on one line, within the
confines of a fixed width DIV, how can I position them so that the
spaces between the words are all of equal size (with half a space
trailing and leading)? For example,

xxxFIRSTxxxxxxSECONDxxxxxxTHIRDxxxxxxFOURTHxxx

where 'xxxxxx' represents the space.

One way is to create a <span> class with equal margin-left and margin-right.
.eq-space span { margin: 0 10%; }
div class="eq-space"><span>FIRST</span><span>SECOND</span>...</div

Thanks, I had to play around with the percentages but it works fine.

Andrew Poulos