Waarom blijven mijn labels en keuzerondjes niet op dezelfde regel staan, wat kan ik doen?
Hier is mijn formulier:
<form name="submit" id="submit" action="#" method="post">
<?php echo form_hidden('what', 'item-'.$identifier);?>
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Second Item</label>
<input type="radio" id="two" name="first_item" value="2" />
<input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" />
</form>
Antwoord 1, autoriteit 100%
Als je de HTML-structuur gebruikt, leg ik in deze vraagkun je eenvoudig je label en invoer naar links laten zweven en de opvulling/marge aanpassen totdat de zaken op één lijn liggen.
En ja, je wilt je keuzerondje een klassenaam geven voor oude IE. En om alleop dezelfde regel te hebben staan, volgens de opmaak waarnaar ik hierboven heb gelinkt, zou het zo zijn:
fieldset {
overflow: hidden
}
.some-class {
float: left;
clear: none;
}
label {
float: left;
clear: none;
display: block;
padding: 0px 1em 0px 8px;
}
input[type=radio],
input.radio {
float: left;
clear: none;
margin: 2px 0 0 2px;
}<fieldset>
<div class="some-class">
<input type="radio" class="radio" name="x" value="y" id="y" />
<label for="y">Thing 1</label>
<input type="radio" class="radio" name="x" value="z" id="z" />
<label for="z">Thing 2</label>
</div>
</fieldset>Antwoord 2, autoriteit 67%
Wat ik altijd heb gedaan, is gewoon het keuzerondje in het label wikkelen…
<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>
Zoiets heeft altijd voor mij gewerkt.
Antwoord 3, autoriteit 11%
Misschien heeft u ergens in uw csseen breedteopgegeven voor uw invoer-tags.
voeg een class="radio"toe aan je radioboxen en een input.radio {width: auto;}aan je css.
Antwoord 4, autoriteit 5%
Zet ze allebei op display:inline.
Antwoord 5, autoriteit 5%
Hmm. Standaard is <label>display: inline;en <input>is (minstens ongeveer) display: inline-block;, dus ze moeten allebei op dezelfde regel staan. Zie http://jsfiddle.net/BJU4f/
Misschien zet een stylesheet labelof inputin op display: block?
Antwoord 6, autoriteit 4%
Ik neem aan dat het probleem is dat ze zich op afzonderlijke regels wikkelen wanneer het venster te smal is. Zoals anderen al hebben opgemerkt, moeten het label en de invoer standaard “display:inline;” zijn, dus tenzij je andere stijlregels hebt die dit veranderen, zouden ze op dezelfde regel moeten worden weergegeven als er ruimte is.
Zonder de opmaak te wijzigen, is er geen manier om dit op te lossen met alleen CSS.
De eenvoudigste manier om dit op te lossen, is door het keuzerondje en label in een blokelement te plaatsen, zoals een pof een div, en dan te voorkomen dat inpakken met behulp van white-space:nowrap. Bijvoorbeeld:
<div style="white-space:nowrap;">
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
</div>
Antwoord 7, autoriteit 4%
Ik vermijd altijd het gebruik van float:leftmaar in plaats daarvan gebruik ik display: inline
.wrapper-class input[type="radio"] {
width: 15px;
}
.wrapper-class label {
display: inline;
margin-left: 5px;
}<div class="wrapper-class">
<input type="radio" id="radio1">
<label for="radio1">Test Radio</label>
</div>Antwoord 8, autoriteit 2%
**
Gebruikte tabel om de radio en tekst op één regel uit te lijnen
<div >
<table>
<tbody>
<tr>
<td><strong>Do you want to add new server ?</strong></td>
<td><input type="radio" name="addServer" id="serverYes" value="1"></td>
<td>Yes</td>
<td><input type="radio" name="addServer" id="serverNo" value="1"></td>
<td>No</td>
</tr>
</tbody>
</table>
</div>Antwoord 9
Ik kon uw probleem niet reproduceren in Google Chrome 4.0, IE8 of Firefox 3.5 met die code. Het label en het keuzerondje bleven op dezelfde regel staan.
Probeer ze allebei in een <p>-tag te plaatsen, of stel het keuzerondje in op inline, zoals The Elite Gentleman voorstelde.
Antwoord 10
Ik gebruik deze code en werkt prima:
input[type="checkbox"],
input[type="radio"],
input.radio,
input.checkbox {
vertical-align:text-top;
width:13px;
height:13px;
padding:0;
margin:0;
position:relative;
overflow:hidden;
top:2px;
}
Misschien wilt u de bovenste waarde opnieuw aanpassen (afhankelijk van uw line-height). Als u geen IE6-compatibiliteit wilt, hoeft u alleen deze code in uw pagina te plaatsen. Anders moet je extra klasse aan je invoer toevoegen (je kunt daarvoor jQuery – of een andere bibliotheek – gebruiken 😉 )
Antwoord 11
Mijn antwoord van een ander bericht over hetzelfde onderwerp zou je moeten helpen formulier voor multicheckbox verzenden invoer van labels verwijderen
Antwoord 12
Opmerking: Traditioneel wordt de label-tag gebruikt voor menu’s. bijv.:
<menu>
<label>Option 1</label>
<input type="radio" id="opt1">
<label>Option 2</label>
<input type="radio" id="opt2">
<label>Option 3</label>
<input type="radio" id="opt3">
</menu>
Antwoord 13
Ik had hetzelfde probleem om alle keuzerondjes op dezelfde regel te houden. Na alles geprobeerd te hebben wat ik kon, werkte niets voor mij behalve het volgende. Wat ik bedoel, is dat het gebruik van de tabel het probleem heeft opgelost waardoor keuzerondjes in dezelfde regel konden verschijnen.
<table>
<tr>
<td>
<label>
@Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name
</label>
</td>
<td>
<label>
@Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date
</label>
</td>
</tr>
</table>
Antwoord 14
Als het probleem is dat het label en de invoer over twee regels lopen als het venster te smal is, verwijdert u de witruimte ertussen; bijv.:
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
Als je ruimte tussen de elementen nodig hebt, gebruik dan vaste spaties (&nbsp;) of CSS.
Antwoord 15
fieldset {
overflow: hidden
}
.class {
float: left;
clear: none;
}
label {
float: left;
clear: both;
display:initial;
}
input[type=radio],input.radio {
float: left;
clear: both;
}