html - 让一个元素与其线的其余部分垂直对齐

Question

在下面的示例中，我尝试添加一些与行对齐但也与外部 div 的右边缘对齐的内联输入范围元素。在实际站点中，html 是通过prettify运行的代码，因此它只是<span>元素内的<pre>元素，因此空格，特别是换行符，是相关的。

在任何情况下，我都会插入这些<input type="range">由 2 个 div 包裹的元素，并试图让它们与同一行中的内容对齐，但在外部容器的右侧。

我实际上还没有找到解决方案。最初我有一个正常的字体大小，如果我在 s 中添加一些无关的内容，.holder事情看起来会对齐，但实际上一旦我增加了字体大小，它就会显示它们实际上并没有对齐。

有没有办法解决这个问题？

我知道通常你可能会用表格（滑块的单独列）或弹性框做这样的事情，但这需要解析所有代码以找到换行符，然后生成一堆新的 html。

.outer {
  position: relative;
  background: pink;
  padding: 1em;
  width: 200px;
}
.holder {
  display: inline-block;
}
.holder>div {
  position: absolute;
  display: inline-block;
  right: 0;
}
.holder input {
  position: absolute;
  display: inline-block;
  right: 1em;
}

<h1>test</h1>
<div class="outer">
  <div>
    <span>foo: </span>
    <div class="holder">&nbsp;
      <div>
        <input type="range">
      </div>
    </div>
  </div>
  <div>
    <span>bar: </span>
    <div class="holder">
      <div>
        <input type="range">
      </div>
    </div>
  </div>
</div>

注意：上面的代码显示了问题，但真正的代码是对空格敏感的 pre 和 span，很难阅读。这里是。

body {
  font-size: 35pt;
}
.outer {
  position: relative;
  background: pink;
  padding: 0.2em;
  width: 300px;
}
.holder {
  display: inline-block;
}
.holder>div {
  position: absolute;
  display: inline-block;
  right: 0;
}
.holder input {
  position: absolute;
  display: inline-block;
  right: 1em;
}

<pre class="outer"><span>foo: </span><div class="holder">&nbsp;<div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>

正如我上面提到的，<pre>and<span>被生成，之后我插入范围输入。

另一个问题是，在实际站点上，<pre>如果一行太长（就像 SO 代码区域一样），该部分会获得滚动条，但在这种情况下，我仍然希望输入区域位于可见区域的右侧（如果您没有滚动）。

body {
  font-size: 35pt;
}
.outer {
  position: relative;
  background: pink;
  padding: 0.2em;
  width: 300px;
  overflow: auto;
}
.holder {
  display: inline-block;
}
.holder>div {
  position: absolute;
  display: inline-block;
  right: 0;
}
.holder input {
  position: absolute;
  display: inline-block;
  right: 1em;
}

<pre class="outer"><span>longlongline: </span><div class="holder">&nbsp;<div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>

最终结果的屏幕截图可能会有所帮助。

通常滑块是内联的（除了 没有CSS display: inline-block），但如果窗口不够宽，滑块会被推开。因此，我将它们设为透明并将它们设置为使用绝对定位，这样它们就不会被推开。这样，您仍然可以阅读代码并与滑块进行交互。

它们似乎与 ATM 对齐，但如果您转到页面并确保您的窗口小于 450 像素宽并将prettyprint.pre字体大小设置为 15pt，那么您会看到对齐只是运气，它们实际上并没有“对齐” “只是某些大小的各种事物碰巧使它们看起来对齐。

我完全理解它们实际上可能不是一个解决方案，除了解析代码并将每一行分隔到它自己的容器中，但如果可能的话，我想使用正确的 CSS（假设它存在）来使它们对齐。

标签： htmlcss

Answer 1

    .outer {
      background: pink;
      padding: 1em;
      width: 200px;
    }

    .holder {
      display: inline-block;
      vertical-align: middle;
    }

    .holder>div {
      display: inline-block;
    }

    .holder input {
      display: inline-block;
    }