Question

我只有两行文字

Kroppspoäng和（sty + kyl）

但他们已经转移到不同的行

 <td class="sheet-table-invis2">
                                <h4 data-i18n="hit-points">Kroppspo&auml;ng</h4><h5 data-i18n="strength-agility">(sty+kyl)</h5>
                            </td>

Answer 1

h4和h5是block元素，因此它们的宽度将占据其父级的宽度，并且作为行彼此堆叠。要将它们彼此内联显示，请将它们inline-block

＆＃13;

h4,h5 {
  display: inline-block;
}

＆＃13;

<td class="sheet-table-invis2">
  <h4 data-i18n="hit-points">Kroppspo&auml;ng</h4>
  <h5 data-i18n="strength-agility">(sty+kyl)</h5>
</td>

＆＃13;

您也可以制作父flex，默认方向为row

＆＃13;

.sheet-table-invis2 {
  display: flex;
}

＆＃13;

<table>
  <td class="sheet-table-invis2">
    <h4 data-i18n="hit-points">Kroppspo&auml;ng</h4>
    <h5 data-i18n="strength-agility">(sty+kyl)</h5>
  </td>
</table>

＆＃13;

Answer 2

我不建议使用DirectoryNotFoundException CSS规则，因为IE9中根本不支持此规则，IE10中完全支持此规则。这些浏览器版本仍然很受欢迎。

相反，我建议根据以下代码使用display: flex和white-space: nowrap CSS规则，以支持IE9，IE10和所有其他流行的浏览器。

＆＃13;

display:inline-block

＆＃13;

.sheet-table-invis2 {
  white-space: nowrap;
}

.sheet-table-invis2 h4, .sheet-table-invis2 h5 {
  display: inline-block;
}

＆＃13;

如何将此文本保留在同一行

2 个答案: