What's my best option for XHTML standards compliant fixed spacing?

Question

I'm trying to space out the items in this menu with the exact same number of pixels. In the 90s, most web developers I knew either used spaces or a spacer gif. These work, but they feel like bad hacks to me. There must be a better way to do this in 2009! I'm more of a back-end coder, so I've been out of the loop for a while. I'd appreciate any help...

<div class="menu">
  <a href="#">Item 1</a> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: (replaced the semicolon with a colon so that these would show up)
  <a href="#">Item 2</a> <img src="spacer.gif" />
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</div>

Answer 1

You could throw an id/class on the anchor element and have right padding.

<div class="menu">
  <a href="#">Item 1</a id="bar"> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
  <a href="#">Item 2</a> 
  <a href="#">Item 3</a>
  <a class="last" href="#">Item 4</a>
</div>

<style type="text/css">
#bar { padding-right:5px; }
</style>

If you want to go for something more generic, on all the anchors but the last:

.menu a { padding:0 5px 0 0; }
.menu a.last { padding-right:0; }

Answer 2

Use CSS, of course!

Specifically, since you asked, apply styles to your anchor elements. Something like:

div.menu { width: 480px; } 

div.menu a{
  margin:0;
  display:block;
  float:left;
  width:120px;
}

might do what you want. As an added bonus, the whole block will act as a link, so you'll get behavior more like a button than a text link, which is probably what you're after since it's a menu. Setting an explicit width on the .menu div will keep your floats from wrapping if the window is too narrow.