Optionsfelder und Beschriftung werden in derselben Zeile angezeigt

Warum können meine Beschriftungen und Optionsfelder nicht in derselben Zeile bleiben. 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>

Wenn Sie die HTML-Struktur verwenden, die ich in dieser Frage dargelegt habe, können Sie einfach Ihre Beschriftung und Eingabe nach links verschieben und den Abstand / Rand anpassen, bis die Dinge in einer Reihe stehen.

Und ja, Sie möchten, dass Ihr Optionsfeld einen Klassennamen für den alten IE hat. Und wenn alle in derselben Zeile wären, wäre es gemäß dem Markup, mit dem ich oben verlinkt habe, so:

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>

Was ich immer getan habe, ist einfach das Optionsfeld 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 funktioniert.

Möglicherweise haben Sie eine Breite für Ihre Eingabe- Tags irgendwo in Ihrem CSS angegeben .

Fügen Sie ein class="radio"zu Ihren Radio-Boxen und ein input.radio {width: auto;}zu Ihrem CSS hinzu.

Setzen Sie sie beide zu display:inline.

Hmm. Standardmäßig <label>ist display: inline;und <input>ist (zumindest ungefähr) display: inline-block;, daher sollten sich beide in derselben Zeile befinden. Siehe http://jsfiddle.net/BJU4f/

Vielleicht ein Sheet setzt labeloder inputzu display: block?

Ich gehe davon aus, dass das Problem darin besteht, dass sie in separate Zeilen eingeschlossen werden, wenn das Fenster zu eng ist. Wie andere bereits betont haben, sollten Beschriftung und Eingabe standardmäßig "display: inline;" sein. Wenn Sie also keine anderen Stilregeln haben, die dies ändern, sollten sie in derselben Zeile gerendert werden, wenn Platz vorhanden ist.

Ohne Änderung des Markups gibt es keine Möglichkeit, dies nur mit CSS zu beheben.

Der einfachste Weg, dies zu beheben, besteht darin, das Optionsfeld und die Beschriftung in ein Blockelement wie a poder a diveinzuschließen und dann zu verhindern, dass dieses umbrochen wird, indem Sie es verwenden white-space:nowrap. Zum Beispiel:

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

Ich vermeide es immer zu benutzen, float:leftaber stattdessen benutze ichdisplay: 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>

Ich benutze diesen Code und funktioniert einwandfrei:

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

Möglicherweise möchten Sie den Spitzenwert neu einstellen (hängt von Ihrem ab line-height). Wenn Sie keine IE6-Kompatibilität wünschen, müssen Sie diesen Code nur 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;))

** Verwendete Tabelle, um Radio und Text in einer Zeile auszurichten

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

** **.

Ich konnte Ihr Problem in Google Chrome 4.0, IE8 oder Firefox 3.5 mit diesem Code nicht reproduzieren. Das Etikett und das Optionsfeld blieben in derselben Zeile.

Versuchen Sie, beide in ein <p>Tag einzufügen, oder stellen Sie das Optionsfeld so ein, dass es inline ist, wie es The Elite Gentleman vorgeschlagen hat.

Meine Antwort aus einem anderen Beitrag zum gleichen Thema soll Ihnen helfen, das Formular für Multicheckbox zu zendieren und Eingaben von Etiketten zu entfernen

Hinweis: Traditionell wird das Label-Tag für Menüs verwendet. z.B:

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

Ich hatte das ähnliche Problem, alle Optionsfelder in derselben Zeile zu halten. Nachdem ich alles versucht hatte, was ich konnte, funktionierte nichts für mich außer dem folgenden. Was ich meine, ist einfach die Verwendung einer Tabelle, um das Problem zu beheben, dass Optionsfelder in derselben Zeile angezeigt werden.

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

Wenn das Problem darin besteht, dass Beschriftung und Eingabe bei zu schmalem Fenster in zwei Zeilen eingeschlossen werden, 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 Leerzeichen zwischen den Elementen benötigen, verwenden Sie nicht unterbrechende Leerzeichen ( & nbsp;) oder CSS.

fieldset {
  overflow: hidden
}

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

label {
  float: left;
  clear: both;
  display:initial;
}

input[type=radio],input.radio {
  float: left;
  clear: both;     
}