无法将我的 CSS 箭头与 header 箭头保持在同一行

Question

我在 Chrome 和 Firefox 上都注意到了这一点。我在 table 的 header 列中放置了一个 CSS 箭头。但是，在小屏幕宽度下，尽管 display:inline-block

箭头会转到下一行

即使在小屏幕宽度下，如何使箭头保持在同一条线上？

.arrow-up:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f00;
}

<table>
  <tr class="headerRow">
    <th class="headerRow arrow-up">
      Header
    </th>
  </tr>
</table>

Answer 1

尝试将 white-space: nowrap; 添加到 .headerRow class。

无法将我的 CSS 箭头与 header 箭头保持在同一行

Having trouble keeping my CSS arrow on the same line as my header

html

css

display