Text nach rechts direkt an den Rand bringen

  • Hey alle zusammen,


    ich habe mal wieder bissl ausprobiert mit CSS und nun habe ich ein Problem. Ich habe 2 Sätze in einer Linie der 1ne Satz ist im normalen <p> und der andere eingebunden mit <span>, beide werden im Stylesheet angesprochen.
    Nun möchte ich aber den <span> Teil nach rechts außen ganz an den rand bekommen, und da komm ich nicht weiter. Habe es schon mit text-align: right; versucht aber hat nicht funktioniert.


    Villt weiß jemand von euch wie man es macht ?


    Hier mein HTML:


    Und mein CSS:


    Freue mich schon auf eure Hilfe.


    MFG,
    Stef

  • Hallo


    Das dürfte schwierig werden. Bei mir werden die Sätze untereinander angezeigt. Auf Smartphones und Tablets dürften die auf noch mehr Zeilen verteilt werden.


    Du schaust dir die Seite wahrscheinlich auf einem großen Desktop-Monitor in voller Fenstergröße an. Das ist zum Erstellen von Webseiten eher von Nachteil. Du solltest zumindest immer mal wieder das Browserfenster verkleinern. Zumal heutzutage eher mit Smartphones und Tablets als mit Desktop-Rechnern im Internet gesurft wird.


    Ich würde am ehesten zu Flexbox raten. Dazu fügst du ins CSS folgende Anweisung ein:


    Code
    1. .neon p {
    2. display: flex;
    3. flex-wrap: wrap;
    4. justify-content: space-between;
    5. }


    Gruss


    MrMurphy

  • Hallo


    Um Flexbox zu verstehen wirst du dich inteniver damit beschäftigen müssen. Am Besten nach "css flexbox" suchen. Dann sollten sich für den Anfang erst mal einige Informationen finden lassen.


    Code
    1. .neon p {
    2. display: flex;
    3. }


    Damit werden die beiden p-Elemente innerhalb von .neon zu Flex-Containern.


    Die direkten Kinder der p-Elemente werden zu sogenannten Flex-Items. Eine weitere Vererbung gibt es bei Flexbox nicht.


    Der jeweils erste Satz im p-Element befindet sich zwar in keinem Container. Trotzdem wird von Flexbox alles vor dem öffnenden span-Tag als ein Container behandelt. Jedes der beiden p-Elemente enthält für Flexbox also zwei Container.


    Code
    1. flex-wrap: wrap;


    Flexbox-Items werden als Vorgabe grundsätzlich nebeneinander angezeigt. Durch diese Anweisung können sie untereinander rutschen. Für dein Beispiel finde ich das sinnvoll. Wenn die Sätze nicht ein eine Zeile passen rutschen sie so zunächst jeweils komplett untereinander.


    Code
    1. justify-content: space-between;


    Durch diese Anweisung werden alle Flex-Items komplett wo weit wie möglich über die gesamte Zeilenbreite verteilt. Da es jeweils nur zwei Flex-Items gibt werden sie jeweils so weit wie möglich links und rechts angezeigt. Also dass, was du erreichen willst.


    Gruss


    MrMurphy