0
Chrome과 Firefox에서이 사실을 발견했습니다. 내 테이블의 머리글 열에 CSS 화살표가 있습니다. 그러나 작은 화면 너비에서 화살표는 다음 줄로갑니다 display:inline-block
내 머리글과 동일한 줄에 내 CSS 화살표를 유지하는 데 어려움이 있습니다.
작은 화면 너비에서도 같은 줄에 화살표를 유지하는 방법은 무엇입니까?
.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>
텍스트를 줄 바꿈하고'display : inline-block; vertical-align : middle;'https://jsfiddle.net/rp298zoh/ – LGSon
작은 폭으로 압축 할 때, 화살표가 다음 줄로 넘어 간다. –
'white-space : nowrap'을'headerRow '.. https://jsfiddle.net/rp298zoh/1/ – LGSon