代码之家 › 专栏 › 技术社区 › user7055375

无法将CSS箭头与标题保持在同一行

display css html

user7055375 · 技术社区 · 6 年前

我在Chrome和Firefox上都注意到了这一点。我在表格的标题列中放了一个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>

1 回复 | 直到 6 年前

Funk Forty Niner 6 年前

尝试添加 white-space: nowrap; 到 .headerRow 班

推荐文章

mike · 如何在ISPF中设置宽屏幕大小

1 年前

Akanksha Arya · 程序从用户输入8个数字并显示所有唯一的no

1 年前

tomhuckle · 一行CSS中的两个div。当一行中只有一个div时,向左对齐

1 年前

user2217057 · CSS display none删除元素,但保留其占用的空间

2 年前

Basj · 如何使用CSS将卡片水平对齐,使其顶部边框相等?

2 年前

Kalidas Rajeev · 无法在materializecss中隐藏单选按钮?

6 年前

rainer · Codenameone旋转显示

6 年前

Demetrius · 增量显示SQLite数据库中的数据

6 年前

user7055375 · 无法将CSS箭头与标题保持在同一行

6 年前

Vinny · Css表格单元格和相对宽度

6 年前