Question

我想请求帮助完成这项任务：我想在img和一段文本之间有一个非破坏性的空间。但问题是，即使出现非破坏空间，有时图像和文本之间的界限也会破裂。我哪里错了？

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

HTML

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

CSS

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

Answer 1

你出错了，因为NBSP的Unicode规范说在字符后不应该有换行符。它并不止于在角色面前有一个。

要解决此问题，请将<img>和 包裹在一个范围内，并为样式white-space:nowrap;
添加范围

CSS - img和text之间不间断的空间

1 个答案: