Перемещение входных переключателей с помощью CSS

Я хочу переместить свои радиообъекты под каждый из вариантов. Radiobutton "test1" под первым выбором и радиобутом "test2" под вторым выбором. То есть, радиообъекты находятся ниже выбора, но рядом друг с другом.

Как мне это сделать? Я не хочу использовать таблицы или бр. Я хотел бы использовать CSS; как я должен стилизовать свой CSS?

  <form name="test">
    <label style="float:left;">test</label>
    <input style="display:block" />
    <label style="float:left;">test</label>
    <input style="display:block" />
    <label style="float:left;">test</label>
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    <select>
       <option>a</option>
       <option>b</option>
    </select>
    <input type="radio" name="test" value="test1">
    <input type="radio" name="test" value="test2">
</form>

Если я добавлю несколько радиоокно:

Я попытался использовать + (смежный селектор) в CSS, но я думаю, что это потому, что позиция абсолютна. Поэтому следующие "дети" не будут выравниваться по горизонтали. Я думаю, что это самый простой/ "аккуратный" способ сделать это.

Поэтому я попытался установить его относительно (первый радиоканал) и float:left. Но он слишком высокий.

Ответ 1

Здесь каждый переключатель находится под каждым элементом выбора, используя только CSS без изменения вашего HTML.

form {
  display: block;
  position: relative;
  padding-bottom: 30px;
}

input[type="radio"] {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 30px;
}

input[type="radio"]:last-child {
  left: 70px;
}

JSFiddle Demo: https://jsfiddle.net/3w16q179/1/

Более 2 переключателей:

JSFiddle Demo: https://jsfiddle.net/3w16q179/6/

Ответ 2

Это приведет к выравниванию переключателей под входами выбора независимо от ширины их ширины.

input[type="radio"] {
  display: block;
}

<form name="test">
  <label style="float:left;">test</label>
  <input style="display:block" />
  <label style="float:left;">test</label>
  <input style="display:block" />
  <label style="float:left;">test</label>
  <div style="float:left;">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    <input type="radio">
  </div>
  <div style="float:left;">
    <select>
      <option>2</option>
      <option>3</option>
    </select>
    <input type="radio">
  </div>
</form>

Ответ 3

AHA! Я просто понял, что вы ищете... Каждый переключатель находится в центре выбора. Я понял.

<!doctype html>
<html>
    <style type = "text/css">

        form * {
            box-sizing: border-box;
        }

        form {
            background: White;
            width: 420px;
            padding: 8px;
            border: 1px solid grey;
        }

        fieldset {
            text-align: center;
            border: 0;
            padding: 0;
        }

        label {
            width: 33.33%;
            float: right;
            padding: 6px;
        }

        legend {
            display: block;
            float: left;
            width: 33.33%;
            margin: 0;
        }
    </style>

    <form name="test">
        <fieldset>
            <label>
                <select>
                 <option>a</option>
                 <option>b</option>
                </select>
            </label>

            <label>
                <select>
                 <option>a longer ooption</option>
                 <option>b</option>
                </select>
            </label>
        </fieldset>

        <fieldset>
            <label>
                <input type="radio" name="radio">
            </label>

            <label>
                <input type="radio" name="radio">
            </label>

            <legend>
                Choose One:
            </legend>
        </fieldset>
    </form>
</html>

jsFiddle: https://jsfiddle.net/3jbqjj0f/

Ответ 4

Вы можете использовать display: block или display: inherit;.

input[type="radio"] {
    display: block;
}

JSFiddle

Ответ 5

Хотя ваш вопрос не так ясен, я думаю, вы можете использовать class. Просто добавьте любой класс на вход, который хотите переместить.

Например:

HTML

<input type="radio" class="myinput" />

CSS

input.myinput {
    display:block;
    margin-top:20px; /* For top spacing */
}

Я надеюсь, что это поможет!