How can I make radio buttons next to each other? - html

Question

I got the problem that i want to have 2 radiobuttons next to each other. but one below the other.
<div class="backgroundOverlay cShow" ng-show="isShownUser">
<div class="dropDown positionPopUp inpuBlock" id="add">
<div class="inputBlock">
<h1 class="popupTitle">{{titlePopup}}</h1>
<div>
<div class="cClearFloat cInputSpace">
<input placeholder="login" ng-model="currentUser.login">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Vorname" ng-model="currentUser.Vorname">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Nachname" ng-model="currentUser.Nachname">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="password" ng-model="currentUser.password">
</div>
<div class="cClearFloat cInputSpace cRadioAdmin">
<label><input type="radio" name="Admin">Ja</label>
<label><input type="radio" name="Admin">Nein</label>
<div class="cClearFloat cButtonsUser">
<button class="cButtonSpeichern" ng-click="showAlert()">Speichern</button>
<button class="cButtonAbbrechen" ng-click="isShownUser = false">Abbrechen</button>
</div>
can someone help me pls.

Answer 1

You need to understand the difference between inline elements and block elements.
Using a div instead of your label to wrap the input will do the job.
Like this:
<div><input type="radio" name="Admin">Ja</div>
<div><input type="radio" name="Admin">Nein</div>
You could also use the css, like this:
<label style="display:block"><input type="radio" name="Admin">Ja</label>
<label style="display:block"><input type="radio" name="Admin">Nein</label>
Similarly you can use display:inline to force inline(in case some other css is affecting this)