如何让文字停留在div旁边

我想让文本保持在divs旁边,像这样的 形象. 然而,当我调整窗口的大小时,文字在div下面,尽管有些文字可以在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结构。由于它的结构,里面的元素会自动内嵌块。我已经测试过了,在目前任何宽度的情况下,它们都不会从下到上。

如果你不想构建这种结构,你也可以根据分辨率大小用media query来编辑你的代码。

CSS: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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

使用TextInputLayout的线性布局,但面临一个问题。

2022-9-13 13:45:31

未分类

IDictionary<string, string>或NameValueCollection。

2022-9-13 13:45:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索