Text in einer Zeile rechts- und linksbündig?

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

a) Mit float:

HTML:

<p>
  <span class="left">Linker Text</span>
  <span class="right">Rechter Text</span>
</p>

CSS:

.right { float: right }

b) Mit Flexbox:

HTML:

<p class="aligned-text">
  <span class="left">Linker Text</span>
  <span class="right">Rechter Text</span>
</p>

CSS:

.aligned-text {
  display: flex;
}

.left,
.right {
  width: 50%;
}

.right {
  text-align: right;
}

Vielen Dank! Das war's :)

MfG

0

Eine Sache wäre da noch:

Wenn ich einen Umbruch (<br/>) einfüge, kommt kein Umbruch, sondern bleibt in einer Zeile.

0
@Ollig00

Bei beiden Varianten sollte es aber klappen: https://jsfiddle.net/2xv7s03c/. Lediglich zu Lösungsweg 1 sollte noch ein Selektor für die linke Seite ergänzt werden

.left { float: left }

und bei längerem Text wäre eine Definition der Breite für die span-Elemente praktisch (so wie bei Lösungsweg 2).

0

Dafür gibt es etliche Möglichkeiten.

Entscheidend ist, dass die beiden Wörter irgendwie im Code gekennzeichnet/unterschieden werden, also z.B.

<span class="text1">Text 1</span><span class="text2">Text 2</span>
Woher ich das weiß:Beruf – Entwicklung von Apps und Websites

Probier mal "text-align:justify".

Woher ich das weiß:Hobby – Hobby seit meiner Jugend

Nope, das ist es nicht.

0

Was möchtest Du wissen?