Question

我无法弄清楚如何在图标和相应的文本之间放置一个不可破坏的空间。

例如

<i class="bla"></i> someText

忽略较低屏幕分辨率的 并在图标下方显示文字。有没有其他方法可以确保右侧的图标和一些文本始终排成一行，无论可用空间如何？

提前致谢！

Answer 1

设置容器并使用规则white-space

<强> HTML

<div class="container"><i class="bla"></i>&nbsp;someText</div>

<强> CSS

.container{
display: block;
white-space: nowrap;
}

<强> DEMO HERE

详细了解white-space

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

<i>元素本身不是block元素。这意味着它不会尝试获取它可以获得的整个垂直空间，除非你在CSS中告诉它这样做。

检查您是否设置了.bla的样式，并查看其display是否不是block; ..

＆＃13;

.bla {
  display: block;
}

＆＃13;

<i class='bla'>block i element -- new line after me</i>&nbsp;Some Text here


<br>
<br>


<i class='bla2'>non block i element -- </i>&nbsp;Some Text here

＆＃13;

Answer 3

如果您希望根据屏幕大小设置不同的规则，则可以使用媒体查询。在块“i”之后有一个空格你可以添加边距或创建一个宽度为一些lettres的容器（使用em单位）。

http://www.w3.org/TR/css3-mediaqueries/

<i class="bla"></i> someText

的CSS：

@media screen and (max-width: 640px){
    i{
        margin-right: 0em;
    }
}
@media screen and (min-width: 641px){
    i{
        margin-right: 3em;
    }
}

图标和文字之间的换行符即使？

3 个答案: