Wie kann ich diesen Text auf der gleichen Linie

einfach habe ich zwei Bits von Text auf der LinieWie kann ich diesen Text auf der gleichen Linie

Kroppspoäng und auch (sty + kyl)

Aber sie haben auf verschiedenen Linien bewegt

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

Quelle

2017-03-14 Alexander Wilson

td h4, td h5 {display: inline-block} – Chiller

Es könnte am besten sein, das Problem in erster Linie zu vermeiden, zu schaffen. Es wird durch die Verwendung von Überschriftenelementen in einer Tabellenzelle erstellt. Wozu dienen sie, wenn die Zelle nichts anderes enthält? Erwägen, z.B. 'span' Elemente mit geeigneten Stileinstellungen statt. –

Wie ändere ich die Textgröße mit einem span-Tag? –

Die und h5 sind block Elemente, so dass ihre Breiten die Breite ihrer Eltern und Stapel übereinander als Zeilen aufnehmen. So zeigen sie inline miteinander, machen sie inline-block

h4,h5 { 
 
    display: inline-block; 
 
}

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

Sie können auch die Eltern machen flex und die Standard-Richtung wird ein row

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

<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>

Quelle

2017-03-14 18:14:33

würde ich nicht empfehlen, eine display: flex CSS-Regel zu verwenden, da dies in IE9 überhaupt nicht unterstützt wird oder in IE10 vollständig unterstützt wird. Diese Browserversion ist immer noch sehr beliebt.

Stattdessen würde ich empfehlen, die white-space: nowrap und display:inline-block CSS-Regeln per dem folgenden Code zu verwenden, damit IE9, IE10 und alle anderen gängigen Browser unterstützt werden.

.sheet-table-invis2 { 
 
    white-space: nowrap; 
 
} 
 

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

<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>

Quelle

2017-03-14 18:39:27 risingPhoenix1979

Wie kann ich diesen Text auf der gleichen Linie

Antwort

Verwandte Themen