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

在下面的示例中，您可以看到div中的“ c”和“ x”如何正确地放置在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>

最佳答案

将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>

关于html - 如何在Div中正确呈现文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38434150/