Text neben einer Checkbox oder einem Radiobutton bündig, selbst bei Zeilenumbruch

NTDY

Erfahrenes Mitglied
Ich habe das Problem, dass ich einen Text neben einer Checkbox bündig positionieren möchte. Das bedeutet, dass Text stets unter Text und Checkboxen stets unter Checkboxen stehen sollen.
In dem folgenden Beispiel klappt dies aber nicht. Ich habe es bisher mit display: block, float: left, display: inline und anderen Varianten versucht. Leider vergeblich. Hat jemand von euch eine Idee?

HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
ul {
	list-style: none;
	background: rgba(100,100,200,0.5);
	width: 200px;
	margin: 0;
	padding:0;
}
</style>
</head>

<body>
<ul>
<li class="leaf first">
  <input type="checkbox" class="klick">
  &nbsp;<a class="api" href="#">Mathematik für Anfänger</a></li>
<li class="leaf last">
  <input type="checkbox" class="klick">
  &nbsp;<a class="api" href="#">Mathematik für Wirtschaftsinformatiker und Biologen</a></li>  
</ul>
</body>
</html>
 
Hallo,

deine Versuche waren m.E. teilweise richtig:
  • Das INPUT-Element nach links floaten.
  • Das A-Element als Block deklarieren und mit einem linken MARGIN von beispielsweise 24px versehen.

Auf die "&nbsp;"-Entität vor dem A-Element kannst du dann verzichten.
 
Zuletzt bearbeitet:
Zurück