我正在尝试使文本保留在div旁边，例如此图像。但是，当我调整窗口大小时，即使某些文本可能适合间隙，文本也位于div下面。有什么办法让他们在一起吗？两者都是display: inline-block;，我已经尝试过word-break: break-all;，overflow-wrap: break-word;但都无法正常工作。另外，向左浮动会弄乱整个事物，并推动一切。
h3 {
position: relative;
color: var(--font-color);
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin-left: 5px;
word-break: break-all;
overflow-wrap: break-word;
}
.divider {
display: inline-block;
height: 15px;
width: 2px;
position: relative border-radius: 30px;
background: #0099ff;
margin-left: 35px;
}<div class="divider"></div>
<h3>global average temperature</h3>您可以使用flexbox结构。由于其结构，其中的元素将自动内联。我已经测试过了，在任何宽度的情况下，它们都不是自底向下的。
如果您不想构建此结构，则还可以根据分辨率大小和媒体查询来编辑代码。
CSS：
h3{
margin-left: 5px;
}
.divider {
height: 15px;
width: 2px;
border-radius: 30px;
background: #0099ff;
margin-left: 35px;
}
.container-content {
display: flex;
align-items: center;
}
HTML：
<div class="container-content">
<div class="divider"></div>
<h3>global average temperature</h3>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句