如何对齐跨度以粘在同一行上的 div 上？

Question

简介

我的问题非常具体，我尝试了很多 SO 的解决方案，但它们不起作用，因为我的问题与访问动态生成的 DOM 有关。

我有以下生成的 HTML（不能更改其中的任何内容，CSS 除外）：

<div style="flex: 1; z-index: 2;">
    <input type="text" />
</div>
<span style="display: none">X</span>
<span>A</span>

跨度中的“A”为选择/下拉框生成箭头图标。但是 span 低于 div 与输入。

---

---

问题：

我想对齐第二个跨度（第一个有显示：无，所以可能不是问题）以坚持 div。我无权访问动态生成的 HTML，但我有点可以访问 CSS （使用 ::ng-deep 使用 Angular 9 访问生成的 html）。

如何对齐 span 以与 div 保持一致？

---

我已经尝试过，但没有奏效：

我在 span 右侧添加了 float: 并且它可以工作，但它在新行上。

我将 div 更改为 display: inline-block，但它不起作用。我试图让 div 和 span 溢出：隐藏；空白：nowrap，但仍然没有成功。

我将不胜感激任何尝试实现此目标的提示。

Answer 1

用div包裹整个标签，并给出display: flex。

会是这样的。

<div class="wrapper">
    <div style="flex: 1; z-index: 2;">
        <input type="text" />
    </div>
    <span style="display: none">X</span>
    <span>A</span>
</div>

在这段代码中，wrapper 类有display: flex。

此属性将所有内部标签设置在一行中，因为flex-direction 是行。（默认）