Layoutproblem

[TheAbalone]

Hallo!

Ich habe folgendes Problem:
Ich möchte drei Readings (Interpret, Titel, Radiostation) linksbündig untereinander anzeigen lassen:

Code Auswählen Erweitern

<div data-type="label" data-device="HEOSPlayer1925353078" data-get="currentStation" class="left"></div><br />
<div data-type="label" data-device="HEOSPlayer1925353078" data-get="currentTitle" data-substitution="s/Or//g" class="left"></div><br />
<div data-type="label" data-device="HEOSPlayer1925353078" data-get="currentArtist" class="left"></div><br />


Wenn die Readings kurz sind funktioniert class="left". Wenn aber ein Reading zu lang ist, kommt es zu einem Zeilenumbruch und dieses Reading wird zentriert dargestellt. Ist das sogewünscht?

Ich habe auch ewig gebraucht, dass ich die Readings untereinander gebracht habe. Gibt es eine andere funktionierende Lösung als <br />?

Würde mich freuen, wenn jemand wüsste, wie es zu diesem Verhalten kommt.

LG
Bernhard

[OdfFhem]

@TheAbalone

Ich verwende folgende, textorientierte Klassen:

Code Auswählen Erweitern


  class="left-align"

  oder

  class="text-left"


By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Daher sind die <br>-Tags eigentlich überflüssig ... es sei denn, man verwendet die "falschen" Klassen ...

[TheAbalone]

Super, vielen Dank!

Jetzt sind auch die <br /> überflüssig, bzw. er macht sie doppelt.

Woher kommt dann das class="left" im FHEMWiki (https://wiki.fhem.de/wiki/FHEM_Tablet_UI) ?

Code Auswählen Erweitern

<div class="left">
   <div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div>
   <div class="inline">
       <div data-type="label" data-device="AgroWeather" data-get="par02"></div>
       <div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
       min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div>
   </div>
</div>
<div class="left">
   <div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
   <div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
</div>