Question

Considering this sample code:

<div style="width:300px;">
   <a href="#">
      <img src="images/bracket_open.png"/>
      <img src="images/1.png"/>
      <img src="images/bracket_close.png"/>
   </a>
   <a href="#">
      <img src="images/bracket_open.png"/>
      <img src="images/2.png"/>
      <img src="images/bracket_close.png"/>
   </a>
   <a href="#">
      <img src="images/bracket_open.png"/>
      <img src="images/3.png"/>
      <img src="images/bracket_close.png"/>
   </a>
</div>

Basically a long list of anchor tags that contain multiple image tags (because of the font) that make up something like [1] [2] [3] and so on.

How can I make it so that the line breaks only occur between the anchor tags and never between the image tags inside of the anchor tags.

I would preffer a XHTML/CSS solution rather than JavaScript if such exists.

Thank you.

Answer 1

Simple nowrap doesn’t work?

div a {
    white-space:nowrap;
    }

With HTML like

<a href="#"><span>[</span><span>1</span><span>]</span></a><a href="#"><span>[</span><span>2</span><span>]</span></a><a href="#"><span>[</span><span>1</span><span>]</span></a>...

You also can use:

div a {
    float:left;
    white-space:nowrap;
    }

But it’s not rather elegant due to making inline elements float with no weighty reason.