Optionsfelder und Beschriftungen zur Anzeige in derselben Zeile

Question

Warum werden meine Beschriftungen und Optionsfelder nicht in derselben Zeile angezeigt? Was kann ich tun?

Hier ist meine Form:

<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> 

Answer 1

Wenn Sie die HTML-Struktur I Layout in this question verwenden, können Sie einfach Ihre Beschriftung und Eingabe nach links schweben und Padding/Rand anpassen, bis die Dinge aufgereiht sind.

Und ja, Sie wollen Ihren Radio-Button einen Klassennamen für alte IE haben. Und alle von ihnen auf der gleichen Linie zu haben, nach dem Markup ich oben verbunden ist, wäre es wie so sein:

<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> 

bedeutet, dass Ihr Starter CSS wäre so etwas wie:

fieldset { 
    overflow: hidden 
} 

.some-class { 
    float: left; 
    clear: none; 
} 

label { 
    float: left; 
    clear: none; 
    display: block; 
    padding: 2px 1em 0 0; 
} 

input[type=radio], 
input.radio { 
    float: left; 
    clear: none; 
    margin: 2px 0 0 2px; 
} 

Answer 2

ich nicht in der Lage war Ihr Problem in Google Chrome 4.0, IE8 oder Firefox 3.5 verwendet diesen Code zu reproduzieren. Der Label- und Radio-Button blieb in der gleichen Zeile.

Versuchen Sie, beide in ein <p>-Tag zu setzen, oder stellen Sie das Optionsfeld so ein, dass es inline ist, wie es der Elite Gentleman vorgeschlagen hat.

Answer 3

Hmm. Standardmäßig ist <label>display: inline; und <input> ist (ungefähr, mindestens) display: inline-block;, also sollten sie beide auf der gleichen Linie sein. Siehe http://jsfiddle.net/BJU4f/

Vielleicht ist ein Stylesheet label oder input zu display: block?

Answer 4

Ich benutze diesen Code und funktioniert gut:

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; 
} 

Sie möchten Top-Wert neu einzustellen (auf der line-height abhängt). Wenn Sie keine IE6-Kompatibilität wünschen, müssen Sie diesen Code einfach in Ihre Seite einfügen. Andernfalls müssen Sie Ihren Eingaben eine zusätzliche Klasse hinzufügen (Sie können dafür jQuery oder eine andere Bibliothek verwenden;))

Answer 5

Setzen Sie beide auf display:inline.

Answer 6

Sie könnten eine Breite für Ihre Eingabe Tags irgendwo in Ihrem css haben.

fügen Sie eine class="radio" zu Ihren Radioboxen und eine input.radio {width: auto;} zu Ihrem css hinzu.

Answer 7

Wenn das Problem besteht, dass das Label und die Eingabe in zwei Zeilen umgebrochen werden, wenn das Fenster zu schmal ist, entfernen Sie das Leerzeichen zwischen ihnen; z.B .:

<label for="one">First Item</label> 
<input type="radio" id="one" name="first_item" value="1" /> 

Wenn Sie Platz zwischen den Elementen benötigen, verwenden Sie geschützte Leerzeichen ( ) oder CSS.

Answer 8

Was ich immer getan habe, ist nur den Radioknopf in das Etikett zu wickeln ...

<label for="one"> 
<input type="radio" id="one" name="first_item" value="1" /> 
First Item 
</label> 

So etwas hat immer für mich gearbeitet.

Answer 9

Ich nehme an, das Problem ist, dass sie auf separaten Zeilen wickeln, wenn das Fenster zu schmal ist. Wie andere bereits erwähnt haben, sollten die Beschriftung und die Eingabe standardmäßig "display: inline;" sein. Wenn Sie also keine anderen Stilregeln haben, die dies ändern, sollten sie in der gleichen Zeile dargestellt werden, wenn Platz vorhanden ist.

Ohne das Markup zu ändern, gibt es keine Möglichkeit, dies nur mit CSS zu beheben. das Optionsfeld und Label in einem Blockelement, wie beispielsweise ein p oder div und dann zu verhindern, dass aus Wickeln wäre zu wickeln unter Verwendung white-space:nowrap

Der einfachste Weg, um es zu fixieren. Zum Beispiel:

<div style="white-space:nowrap;"> 
    <label for="one">First Item</label> 
    <input type="radio" id="one" name="first_item" value="1" /> 
</div> 

Answer 10

Meine Antwort von einem anderen Beitrag zum gleichen Thema Sie sollten zend form for multicheckbox remove input from labels

Answer 11

Hinweis helfen: Traditionell ist die Verwendung des Etiketts Tag für Menüs ist. zB:

<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> 

Answer 12

Ich hatte das ähnliche Problem, alle Radioknöpfe auf der gleichen Linie zu halten. Nachdem ich alles versucht hatte, funktionierte nichts für mich außer dem Folgenden. Was ich meine, ist einfach mit Tabelle gelöst das Problem, Radio-Buttons in der gleichen Zeile erscheinen zu lassen.

<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> 

Answer 13

Ich vermeide immer float:left verwenden, sondern verwende ich 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>