html - 如何在 Div 中正确呈现文本？

Question

在下面的示例中，您可以看到 'c' 和 'x' 从 div 中取出如何正确放置在 div 中？

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  height: 10px;
  margin: 3px;
}

<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>

Answer 1

将 line-height 添加到 .controls。

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  height: 10px;
  margin: 3px;
  line-height: 9px; /* added here */
}

<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>