Checkbuttons zentrieren

Status
Nicht offen für weitere Antworten.

Teelicht12

Grünschnabel
Hallo,

ich erstelle gerade ein Formular und habe folgendes Problem:

Die "Checkbuttons" sollen nebeneinander und nicht untereinander zu sehen sein ( es sind pro Reihe), irgendwie gelingt mir dies aber nicht.

Es wäre schön wenn mir vielleicht jemand auf die Sprünge helfen könnte wie ich das hin bekomme.

Grüsse Teelicht
 
Meinst du mit "Checkbuttons" Input-Felder vom Typ checkbox? Sollte eigentlich überhaupt kein Problem sein diese horizontal anzuordnen, bzw. werden diese standardmäßig auch so angeordnet. Ich vermute mal, dass du die Formularfelder mit CSS formatierst (weil du ins entsprechende Forum gepostet hast), und dem input-Feld global etwas dieser Art zugewiesen hast
CSS:
input
{
    width: 100%;
}
Die Breite des Boxmodells (also width + margin + padding ) von Input-Elementen (sein diese nun vom Typ text, password, checkbox, radio, submit oder reset) haben dann immer eine Breite von 100% relativ zum Eltern-Element. Bei Feldern vom Typ text, password, submit und reset wird das in den meisten Fällen dann gewollt sein, bei Feldern vom Typ checkbox und radio führt das dann allerdings dazu, dass diese vertikal angeordnet werden. Zum testen empfehle ich da der Klasse ein
CSS:
input 
{
    border: 1px solid #f00;
}
hinzuzufügen.
Lösen kannst du das Problem, in dem du einen Stil definierst, der der tatsächlichen Breite eines Input-Felds vom Typ checkbox und radio relativ nahe kommt
CSS:
input.small
{
    width: 20px;
}
Diesen Stil wendest du jetzt auf alle Input-Felder vom Typ checkbox und radio an. Bequemer wäre natürlich die Klasse über die Attribute des Input-Felds zu steuern, funktioniert nur leider nicht in allen Browsern
CSS:
input[type='checkbox'], input[type='radio']
{
    width: 20px;
}

Falls ich allerdings vollkommen falsch liege würde es sehr helfen, wenn du den entsprechenden HTML-Code und den dazugehörigen CSS-Code postest!
 
Hi,

Input-Elemente, wie z.B. type=checkbox, werden von Hause aus nebeneinander angeordnet, sofern sie nicht jeweils in einem Blockelement eingebettet sind.

Ihre horizontale Zentrierung innerhalb des Formulars erreichst du beispielsweise über:

Code:
form { 
text-align: center;
}
 
Status
Nicht offen für weitere Antworten.
Zurück