Question

内联块的文本基线在底部未对齐。

如何将根部排列在行内块底部而不是文本底部（基线）上？

当前代码

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

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

Answer 1

您可以通过√选择器将平方根标记::after视为内容。从那里使用position: absolute和top: 6px在边界范围内分层。

HTML：

<div class="parent">
    <span class="radical2"></span>
    <span class="radical">hello</span>
    <span class="radicalData"></span>
</div>

CSS：

 body {
     font-size:28.8px;
     font-family:"Symbola";
     vertical-align:bottom;
}

 .parent{
     height:200px;
}

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

 .radical2 {
     border:1px solid #000;
     display:inline-block;
     height: 33px;
     position: relative;
     vertical-align:bottom;
     width: 20px;
}

 .radical2::after {
     content: "√";
     height: 33px;
     position: absolute;
     margin-bottom: -10px;
     top: 7px;
     z-index: 1;
}

 .radicalData {
     height:200px;
}

工作小提琴here。

Answer 2

在第二个内联块中添加Ctrl + P，将其基线移至底部，然后保持默认对齐方式：

overflow:hidden

.parent {
  height: 200px;
}

.radical {
  display: inline-block;
}

.radicalData {
  height: 200px;
}

您还可以像这样调整<div class="parent"> <span class="radical">√</span> <span class="radical" style="overflow:hidden;">hello</span> <span class="radicalData"></span> </div>：

line-height

.parent {
  height: 200px;
}

.radical {
  display: inline-block;
  border:1px solid;
  vertical-align:bottom
}

.radicalData {
  height: 200px;
}

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

2 个答案: