0

我确信这一定是一个常见问题解答，但我还没有找到答案。

我在 HTML 页面上有一个带有一些文本的小图像。图像需要与后面的单词保持一致，但尽管在 两者之间使用了一个，甚至将它们直接相邻放置，Firefox 有时会在两者之间放置一个换行符。

我还应该承认，它<img>被包装为<a>元素的内容，如果这有所作为的话。

编辑 - 这是一个显示问题的测试文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
&middot; <a href="example.com"; onmouseover="return true"><img height="9" width="9" src="logo-break.gif" alt="pic" /></a>2UXX&nbsp;B:308-375
&middot; <a href="example.com"; onmouseover="return true"><img height="9" width="9" src="logo-break.gif" alt="pic" /></a>2V1D&nbsp;B:308-375
</body>
</html>

如果您显示该页面并慢慢使浏览器变窄，则在第二张图像之后换行。不涉及css。

edit2 - 我在http://jsfiddle.net/487R7/上发布了一个精简的示例， 该版本根本没有<a>元素并且包含&nbsp;实体。调整结果框的宽度以查看症状。

4

2 回答 2

0

好的，一个似乎可行的解决方案是在<span>需要保持在一起的图像和文本周围放置 a ，然后在 span 上设置 CSS 说：white-space:nowrap;

于 2013-05-02T13:39:03.137 回答
0 
<html>
<head><style>.container { width: 400px; }</style></head>
<body>
<div class="container">
<img src="http://lipsum.com/images/lipsum07.gif" style="float: right;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit velit, cursus vitae consequat a, facilisis eu elit. In quis elit non enim semper dictum eget sagittis velit. Mauris nec lectus vitae mi faucibus rutrum non et nunc. Vestibulum ultrices suscipit blandit. Praesent faucibus sagittis arcu, nec convallis dui sodales sit amet. Aenean sapien metus, vestibulum a lacinia id, rhoncus vitae tellus. Fusce enim tortor, suscipit eu tincidunt eu, accumsan eu nulla. Nulla porttitor ullamcorper suscipit. Maecenas vel consectetur ipsum. Mauris blandit sapien et nulla ultrices a consequat nisi sagittis.</p>
</div>
</body>
</html>
于 2013-05-01T16:22:31.800 回答