css - XHTML 为内部有多个图像的多个 anchor 标记设置换行符

Question

考虑这个示例代码:

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

基本上是一长串 anchor 标记，其中包含多个图像标记(由于字体)，它们构成了诸如 [1] [2] [3] 等内容。

我怎样才能使换行符只出现在 anchor 标签之间，而不会出现在 anchor 标签内的图像标签之间。

如果存在的话，我会更喜欢 XHTML/CSS 解决方案而不是 JavaScript。

谢谢。

Answer 1

简单的 nowrap 不起作用？

div a {
    white-space:nowrap;
    }

像 HTML 一样

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

您还可以使用:

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

但由于没有重要原因使内联元素 float ，因此它不是很优雅。