Hallo!
Ich habe folgendes Problem:
Ich möchte drei Readings (Interpret, Titel, Radiostation) linksbündig untereinander anzeigen lassen:
<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
@TheAbalone
Ich verwende folgende, textorientierte Klassen:
class="left-align"
oder
class="text-left"
ZitatBy 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 ...
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) ?
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°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: <div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="°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>