html - 将基线与内联块的底部对齐

Question

inline-block 的文本基线未在底部对齐。

你如何对齐 inline-block 底部的激进而不是文本底部（基线）？

目前我有这个

目标是这个

当前代码

https://jsfiddle.net/x9ugahdb/1/

.parent {
  height: 200px;
}

.radical {
  border: 1px solid #000;
  display: inline-block;
  vertical-align: bottom;
}

.radicalData {
  height: 200px;
}

<div class="parent">
  <span class="radical">√&lt;/span>
  <span class="radical">hello</span>
  <span class="radicalData"></span>
</div>

标签： htmlcss

Answer 1