[英]Having trouble keeping my CSS arrow on the same line as my header
I noticed this on both Chrome and Firefox. 我在Chrome和Firefox上都注意到了这一点。 I have a CSS arrow that I put in my table's header column.
我在表格的标题列中放入了一个CSS箭头。 However, at small screen widths the arrow goes to the next line despite the
display:inline-block
但是,在较小的屏幕宽度下,尽管
display:inline-block
了以下内容,但箭头仍指向下一行display:inline-block
How do I keep the arrow on the same line, even at small screen widths? 即使在较小的屏幕宽度下,如何将箭头保持在同一行?
.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>
Try adding white-space: nowrap;
尝试添加
white-space: nowrap;
to the .headerRow
class. 到
.headerRow
类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.