Abstand zweier labels verkleinern


tklustig

Erfahrenes Mitglied
#1
Hallo Leute,
ich generiere über PHP u.a. zwei labels und bekomme es einfach nüscht gebacken, den Abstand zwischen den labels zu verkleinern. (s.Anhang labels.png)
Eigentlich müsste die CSS-Anweisung
CSS:
 line-height: 25px;
meine Intention bewerkstelligen.
Tut es aber nüscht. Vermutlich, weil eine andere CSS-Regel mächtiger ist?
Weiß jemand Rat?
Hier der CSS-Code
Code:
<style>
    .box {
        float: left;
        width: 15%;
        margin-right: 2%;
        padding: 20px;
        background: #eee;
        box-sizing: border-box;
    }
    .box:last-child {
        margin-right: 0;
    }
    label{
        display:block;
        text-indent:2.5em;
        line-height: 25px;
        font-weight: 500;
        float:right;
    }

</style>
und hier der durch php generierte HTML-Code
PHP:
   <?php    for ($i = 0; $i < count($geschlecht); $i++) {
            if ($geschlecht[$i] == 1) {
                ?><div class="box"> <?= Html::img($url_symbol_male, ['alt' => 'pic not found', 'title' => 'männlich', 'style' => 'width:35px;height:55px']); ?>
                <?= "<label style='font-weight: lighter';>" . $name[$i] . "</label>" ?>
//dieser Abstand soll verkleinert werden
                    <?= "<label>" . $Zieladressen[$i] . "</label>" ?></div><?php
            } else if ($geschlecht[$i] == 2) {
                ?><div class="box"><?= Html::img($url_symbol_female, ['alt' => 'pic not found', 'title' => 'weiblich']); ?>
                    <?= "<label style='font-weight: lighter';>" . $name[$i] . "</label>" ?>
                    <?= "<label>" . $Zieladressen[$i] . "</label>" ?></div><?php
            } else if ($geschlecht[$i] == 3) {
                ?><div class="box"><?= Html::img($url_symbol_bi, ['alt' => 'pic not found', 'title' => 'Transgender']); ?>
                    <?= $name[$i] ?>
                    <?= "<label>" . $Zieladressen[$i] . "</label>" ?></div><?php
            }
        }
 

Anhänge

Sempervivum

Erfahrenes Mitglied
#2
Wenn ich dein CSS und dein HTML in eine Testseite schreibe, funktioniert es mit line-height einwandfrei.
Vermutlich, weil eine andere CSS-Regel mächtiger ist?
Das vermute ich auch, label ist ja etwas sehr globales. Um es herauszufinden, müsste man die ganze Seite untersuchen können.
Oder Du versucht dieses:
Code:
   div.box label{
        all: unset;
        display:block;
        text-indent:2.5em;
        line-height: 25px;
        font-weight: 500;
        float:right;
    }
d. h. die Eigenschaften zuvor in den Grundzustand versetzen.
 

tklustig

Erfahrenes Mitglied
#3
das all:unset bringt rein gar nix.
Wenn ich das zweite label vor den Zileadressen weglasse, verringert sich der Abstand etwa um die Hälfte, ist aber immer noch zu weit weg. Wenn ich das line-height in firedebug wegknipse, verringert sich nur der Abstand relativ zur Box, nicht jedoch zwischen den label, wie eigentlich beabsichtigt...
Gemäß des Anhangs sieht das jetzt aus. Nicht perfekt, aber damit kann ich leben...
 

Anhänge

Zuletzt bearbeitet:
#5
Hallo tklustig

Du enthälst uns leider wichtige CSS- und wohl auch wichtige HTML-Angaben vor. Mit dem gezeigten Quelltext lässt sich die Darstellung wie auf dem ersten Bild nicht erreichen.

Grundsätzlich wage ich zu bezweifeln dass das label-Element in diesem Zusammenhang überhaupt korrekt ist.

Das Abstandsproblem liegt aber an der Anwendung von float ohne sich ausreichend über die Folgen zu informieren.

.box hat eine Breite von 15 Prozent. Dadurch passt die nach rechts gefloatete E-Mail-Adresse nicht mehr neben das Bild sondern rutscht unter das Bild.

Damit die E-Mail-Adresse neben das Bild passt muss .box passend verbreitert werden.

Mit line-height, margin und ähnlichen Angaben hat das Problem überhaupt nichts zu tun.

Insgesamt ist "float: right" auch nicht dafür gedacht Text oder andere Elemente rechtsbündig auszurichten. Grundsätzlich ist float deshalb nicht geeignet dein Problem zu lösen. Da wirst du merken wenn du .box sehr breit machst.

Zu bedenken ist auch das E-Mail-Adressen sehr unterschiedliche Längen haben können.

Für die von dir gewünschte Darstellung gibt es Flexbox oder CSS-Grid. Speziell wenn das Layout responsive werden soll.

Gruss

MrMurphy
 
Zuletzt bearbeitet:

tklustig

Erfahrenes Mitglied
#6
Da ich ein Framework verwende, werden generell die CSS - Regeln von Bootstrap verwendet.
Um das responsive Design brauche ich mich nicht zu kümmern, das erledigt die GridView des Frameworks für mich:cool:
Ich habe hier ausnahmsweise eine eigene entwickelt, da ich nicht weiß, welche Bootstrap-CSS-Anweisungen meine Intention erfüllen bzw. ob es überhaupt welche gibt, die sie erfüllen. Sofern Ihr euch mit Bootstrap besser auskennt wäre es mir eine Hilfe, zu erfahren, welche <div>'s ich mit welchen Bootstrap-CSS-Anweisungen versehen soll! Das wäre mir sowieso am liebsten!!
Den geäußerten Bedenken stimme ich zu und erwarte weiterhin Euer Feedback...
An basti1012: Eine Negativierung der Regeln habe ich vorher bereits ausprobiert. Es passiert gar nix!
 

Jan-Frederik Stieler

Monsterator
Moderator
#9
Hi,
eine URL wäre sinnvoll damit wir Deinen Quellcode analysieren können.
Wir sehen hier nur einen Ausschnitt und wissen nicht was sonst noch so mit reinspielt.
Ich z.B. Hab keine Lust mir das HTML aus Deinem PHP Code zusammenzuftimmeln.

Grundsätzlich, wer floatet muss auch clearen und Deine Labels entsprechen nicht den Regeln. Den Labels müssen Elementen zugeordnet sein sonst machen sie keinen Sinn.
Also entweder for-Attribut verwenden oder mit dem Label das zu beschreibende Elment umschließen.

Zu Bootstrap, um deren Grid zu verwenden musst Du eine Containerklasse verwenden und dann auf die Elemente die col-Klassen verteilen.

Dein Anstand kommt zustande weil das Bild links den Text verdrängt.
Am besten fasst Du die beiden Texte zusammen so das du das Bild und ein DIV hast. Dann setzt Du beides auf Display: inline-Block. Und fertig.

Grüße