wake-up-neo.com

Wie kann ich erreichen, dass Eingabe-Funkelemente horizontal ausgerichtet werden?

Ich möchte, dass sich diese Radio-Eingänge über den Bildschirm erstrecken und nicht unter einem anderen:

HTML

<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change

CSS

input[type="radio"] {
    margin-left:10px;
}

http://jsfiddle.net/clayshannon/8wRT3/13/

Ich habe mich mit den Anzeigeeigenschaften herumgetobt und gegoogelt und nach einer Antwort gesucht, aber keine gefunden.

htmlcssinputradio-button
12
B. Clay Shannon

In Ihrem Fall müssen Sie lediglich die Zeilenumbrüche (<br>-Tags) zwischen den Elementen entfernen. input-Elemente sind standardmäßig inline-block (mindestens in Chrome). (aktualisiertes Beispiel) .

<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change

Ich würde jedoch vorschlagen, <label> Elemente zu verwenden. Wenn Sie auf das Etikett klicken, wird auch das Element überprüft. Verknüpfen Sie das for-Attribut des <label> mit der id des <input>: (Beispiel)

<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>

<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>

<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>

..oder die <label>-Elemente direkt um die <input>-Elemente wickeln: (Beispiel)

<label>
    <input type="radio" name="editList" value="always"/>Always
</label>
<label>
    <input type="radio" name="editList" value="never"/>Never
</label>
<label>
    <input type="radio" name="editList" value="costChange"/>Cost Change
</label>

Sie können auch die Pseudo-Klasse :checked verwenden.

27
Josh Crozier

Um Ihr Optionsfeld horizontal aufzulisten, fügen Sie einfach hinzu

RepeatDirection = "Horizontal" 

in Ihre ASPX-Datei, in der die asp: radiobuttonlist deklariert wird.

1
Arjun

Dies funktioniert auch wie ein Zauber

<form>
    <label class="radio-inline">
      <input type="radio" name="optradio" checked>Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>

1
John

Hier wird aktualisiert Fiddle

Entfernen Sie einfach </br> zwischen den Eingangsradios

<div class="clearBoth"></div>
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
<div class="clearBoth"></div>
1
Naveen Kumar Alonekar