html - 使用 CSS 和 HTML 将三 Angular 形(箭头)元素左侧定位到 内的文本

Question

正在重新创建此表，我正在尝试在第一行中重新创建三 Angular 形位置:

HTML 中的这部分:

<table>
    (...)
    <tr>
        <td><div id="arrowUp"></div>Norrk&ouml;ping</td>

箭头代码:

#arrowUp {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #0dff00 transparent;
}

我不知道如何定位它。尝试更改位置属性，但它似乎破坏了表格，边距拉伸(stretch)了行。它应该与显示和位置有关，但我对可能性感到茫然，无处可去。

Answer 1

你可以使用position: absolute

td {
  position: relative;
  padding-left: 15px;
}
#arrowUp {
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #0dff00 transparent;
}

<table>
  <tr>
    <td>
      <div id="arrowUp"></div>Norrk&ouml;ping</td>
  </tr>
</table>

你可以在没有 div 的情况下使用伪元素解决这个问题

td {
  position: relative;
  padding-left: 15px;
}
td.arrowUp:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #0dff00 transparent;
}

<table>
  <tr>
    <td class="arrowUp">
      Norrk&ouml;ping</td>
  </tr>
</table>

或任何 HTML 实体箭头

td {
  position: relative;
  padding-left: 15px;
}
td.arrowUp:before {
  content: '⇧';
  position: absolute;
  color: lime;
  left: 0;
  font-weight: bold;
}

<table>
  <tr>
    <td class="arrowUp">
      Norrk&ouml;ping</td>
  </tr>
</table>

旁注:我建议使用伪元素而不是额外元素