CSS - 图片和文本之间不间断空格

Question

我想寻求有关此任务的帮助：\n我希望在 img 和一段文本之间有一个不间断的空格。但问题是，有时即使出现不间断空格，图像和文本之间的线条也会中断。\n我哪里错了？

\n\n

这是 JsFiddle：\n https://jsfiddle.net/cj7Lp1vy/9/

\n\n

超文本标记语言

\n\n

<div id="parent">\n    <div id="child">\n        <!-- some content -->\n        <div class="cl">\n            <img src="obrazky/plocha.png">&nbsp;Plocha: 11 m<sup>2</sup>\n            <img src="obrazky/pocet_pokoju.png">&nbsp;Pokoje: 2\n            <img src="obrazky/rekonstrukce.png">&nbsp;Rekonstrukce: ne\n            <img src="obrazky/okna.png">&nbsp;Okna: star\xc3\xa1\n            <img src="obrazky/topeni.png">&nbsp;Topen\xc3\xad: d\xc5\x99evo\n            <img src="obrazky/typ_stavby.png">&nbsp;Typ stavby: d\xc5\x99evo            \n        </div>\n    </div> \n</div>\n

\n\n

CSS

\n\n

#parent {\n    width:235px;\n    min-height:110px;\n    border:1px solid #CCCCCC;\n    padding:15px 10px 10px 10px;\n    margin:0px 12px 24px 12px;\n    border-radius: 10px;\n    -moz-border-radius: 10px;\n    -webkit-border-radius: 10px;\n}\n#child {\n    position:relative;\n}\n.cl {\n    clear:both;\n}\nimg {\n    border:1px solid red;\n    width:16px;\n}\n

\n

Answer 1

你错了，因为 NBSP 的 Unicode 规范规定字符后面不应该有换行符。这并不能阻止角色之前有一个。

要解决此问题，请将<img>和 the包装 在一个跨度中，并为该跨度指定样式white-space:nowrap;