26.02.2016, 13:02
|
|||
|
|||
Checkboxen nebeneinander in einer Zeile
Hallo,
ich möchte Checkboxen, bzw Options in einer Zeile nebeneinander haben. In jeder Zeile steht noch links eine Beschriftung, welche natürlich unterschiedlich lang ist, deshalb ist die zweite Bedingung, das die Checkboxen in jeder Zeile genau untereinander stehen müssen. Das krieg ich irgendwie nicht hin.... Der Code schaut ca. so aus... Code:
<div class="zeile"> Beschriftungstext 1 <input type="checkbox" class="checkbox1"/>ja <input type="checkbox" class="checkbox2"/>nein </div> <div class="zeile"> anderer Beschriftungstext2 <input type="checkbox" class="checkbox1"/>ja <input type="checkbox" class="checkbox2"/>nein </div> Der CSS Code für die Checkbox enthält nur ein margin: Code:
.checkbox1
{
margin: 0px 0px 0px 100px;
}
.checkbox2
{
margin: 0px 0px 0px 20px;
}
Grüße, Parallax 
|
| Sponsored Links |
|
26.02.2016, 13:57
|
|||
|
|||
|
Hallo
Zitat:
Dann ist aktuell das Flexbox-Modell das Mittel der Wahl. Ja-/Nein-Antworten rufen direkt nach Radio-Buttons, die kannst du aber ohne Änderungen im CSS durch Checkboxen ersetzen. Der Quelltext könnte folgendermaßen aussehen: Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Formular Radio-Button 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: Sans-Serif;
font-size: 120%;
}
body {
width: 94%;
margin: 1rem auto;
}
}
/* ==================================================== */
/* ***Ab hier beginnen die Angaben zur Problemlösung*** */
/*Spezielle Einstellungen*/
@media all {
form div {
display: flex;
flex-wrap: wrap;
}
form div :nth-child(2n+1) {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 15rem;
}
form div :nth-child(2n+2) {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 15rem);
}
form div :nth-child(2n+2) :nth-child(2n+3) {
margin-left: 2rem;
}
}
/* *** Ende der Angaben zur Problemlösung*** */
/* ===================================================== */
</style>
</head>
<body>
<form>
<div>
<label for="frage1">Beschriftungstext:</label>
<section>
<input type="radio" id="frage11" name="frage1" value="ja" />
<label for="frage11">Ja</label>
<input type="radio" id="frage12" name="frage1" value="nein" />
<label for="frage12">Nein</label>
</section>
<label for="frage2">Anderer Beschriftungstext:</label>
<section>
<input type="radio" id="frage21" name="frage2" value="ja" />
<label for="frage21">Ja</label>
<input type="radio" id="frage22" name="frage2" value="nein" />
<label for="frage22">Nein</label>
</section>
</div>
</form>
</body>
</html>
MrMurphy Geändert von MrMurphy (27.02.2016 um 00:47 Uhr)
|
| Sponsored Links |
|
26.02.2016, 22:28
|
|||
|
|||
|
Hallo
Zitat:
Das div-Element im form-Element enthält abwechselnd jeweils ein label- und ein section-Element. Mittels Code:
form div {
display: flex;
flex-wrap: wrap;
}
Das label-Element bekommt mittels Code:
form div :nth-child(2n+1) {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 15rem;
}
Das section-Element bekommt mittels Code:
form div :nth-child(2n+2) {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 15rem);
}
Die label- und input-Elemente innerhalb der section-Elemente sind sogenannte inline-Elemente, die sich deshalb "von selbst" innerhalb einer Zeile anordnen. Dadurch, dass sie jeweils den gleichen Text enthalten stehen sie direkt untereinander. Mit Code:
form div :nth-child(2n+2) :nth-child(2n+3) {
margin-left: 2rem;
}
Mit unterschiedlichen Texten müsste das CSS noch etwas angepasst werden, aber du benötigst nur ja- und nein-Antworten. Von daher kannst du dir die Arbeit sparen. Gruss Murphy Geändert von MrMurphy (26.02.2016 um 22:42 Uhr)
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Neues Karriereportal (Bitte um Feedback) | ThomasE | Site- und Layoutcheck | 23 | 02.01.2012 16:44 |
| Pre-Tag mit overflow: auto - Bug? (IE) | RomanM | CSS | 3 | 26.12.2007 18:21 |
| Checkboxen nebeneinander | radon | CSS | 5 | 20.11.2006 23:19 |
| Tabelle: Problem mit restlicher Spaltenhöhe im IE | MoRpH2k2 | (X)HTML | 3 | 18.08.2006 07:44 |
| Warnungen beim Validieren | Uschi | CSS | 2 | 23.09.2005 19:18 |
Linear-Darstellung
