Checkbox einzeln verschieben?
TooLate
- css
- html
0 Rolf B0 Matthias Apsel0 TooLate0 Rolf B0 TooLate0 TooLate
0 Matthias Apsel
Hallo Forum
Ich habe eine Checkbox, vor der noch ein <label> sitzt. Wenn ich nun versuche, die Checkbox über die input-id leicht nach unten zu verschieben, verschiebt sich das <label> mit runter. Die Checkbox sollte aber auf den Doppelpunkt nach "gelesen" fluchten.
<label class="leftside" for="input11">Ich habe die <a href="agb.pdf" style="text-decoration: underline; color: black; font-size: 1.1rem;">AGB</a> gelesen:</label><input id="input11" type="checkbox" name="C1" size="20">
Ist es hier angebracht ein <div>-Kontainer für die Checkbox zu benutzen?
Zu sehen hier
TooLate
Hallo TooLate,
nicht nötig. Du hast zwei Inline-Elemente nebeneinander, die positioniert man anders als Block-Elemente. Gib der checkbox vertical-align: text-bottom;
und entferne margin-top.
Der Default für vertical-align ist baseline, aber das ist zu hoch. Warum auch immer die Browser das tun...
text-bottom bezeichnet die Untergrenze der Buchstaben in dieser Zeile, inclusive Unterlängen. Mit margin-bottom kannst Du die Checkbox dann feinjustieren. Aber bitte in em, nicht px. margin-bottom: 0.1em;
sollte passen.
Die schlechtere Alternative wäre, auf text-align und margins zu verzichten und die Checkbox mit position:relative; top: 0.2em;
oder ähnlichem zurechtzuschieben. Das geht AUCH, berücksichtigt aber zu wenig die Eigenschaften des verwendeten Fonts.
Rolf
Hallo Rolf B,
Der Default für vertical-align ist baseline, aber das ist zu hoch. Warum auch immer die Browser das tun...
Weil unser Text nun mal an der Grundlinie ausgerichtet ist.
Bis demnächst
Matthias
Hallo RolfB
Dein...
vertical-align: text-bottom;
... in der CSS-Datei war hilfreich. Allerdings musste das...
margin-bottom: 5px;
...weg. Das war das Problem. Das und das fehlende "vertical-align: text-bottom;". Top wird benötigt, um den oberen Abstand ein zu stellen.
Vielen Dank für deine Hilfe - jetzt fluchtet es ausreichend!
Gruss TooLate ☺️
Hallo TooLate,
mach noch ein <br> vor die AGB Zeile.
Alternativ gestalte deine Formularzeilen nach diesem Muster:
<label>
<span>Labeltext</span>
<input ... >
</label>
label { display: flex; }
label span { flex-basis: 10em; /* oder so */
Dann brauchst Du keine <br> dazwischen, braucht in den Labels kein for-Attribut und hast alles ordentlich nebeneinander.
So kann das aussehen: https://jsfiddle.net/Rolf_b/qec4qsnt/2/
Die Zeilen im CSS mit /* fallback */ greifen, wenn der Browser keine Flexbox unterstützt (mach z.B. aus flex
ein klex
um das zu probieren).
Rolf
Hi Rolf B
Du wirst jetzt wahrscheinlich lachen - aber genau so war das ursprünglich geplant!
Die vertikale Fluchtlinie sollte, so wie in deinem Beispiel, zwischen dem Doppelpunkt und dem Eingabefeld verlaufen. Weil aber wegen der "Flex"-Geschichte wieder nicht sicher gestellt werden kann, ob das über all läuft, habe ich dann alle Abstände händisch eingestellt.
Das mit dem <br> probier ich bei Gelegenheit aus, muss gerade weiter…
Herzlichen Gruss TooLate
Hallo Rolf B
Das mit dem <br> hast du richtig erkannt. Hat gefehlt, was bewirkte, dass bei kleineren Bildschirmen die AGB-Zeile bereits an der Checkbox began. Zu mindestens war das am iPad so. Jetzt läuft es auch dort zufriedenstellend.
Spätes Dankeschon und Gruss
TooLate
Hallo Rolf B,
mach noch ein <br> vor die AGB Zeile.
Alternativ gestalte deine Formularzeilen nach diesem Muster:
Ohne „alternativ“.
Bis demnächst
Matthias