如何在Div中正确渲染文本？

Question

在以下示例中，您可以看到＆＃39; c＆＃39;和＆＃39; x＆＃39;从div出去如何在div中正确放置？

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我想这与line-height有关，所以将line-height: 0.3添加到.controls：

＆＃13;

＆＃13;

.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: 0.3;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预览

你可能需要调整一下才能做到正确。因为它在Firefox中运行良好，并且在Chrome中显示如上图像。

Answer 2

将line-height添加到.controls。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

line-height =该区域的高度将很好..

.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;
  line-height: 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 4

Line-height和text-align效果很好。由于文本未在任何标记内定义，我们必须使用line-height对齐它

.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:7px;/*Add this*/
  text-align:center;/*Add this*/
}

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