Question

我希望在每个选项下移动我的radiobuttons。第一次选择下的Radiobutton“test1”和第二次选择下的radiobutton“test2”。也就是说，无线电按钮位于选择范围之下，但彼此相邻。

我该怎么做？我不想使用表格或br。我想用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。但它的定位过高。

Answer 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演示：https://jsfiddle.net/3w16q179/1/

超过2个单选按钮：

JSFiddle演示：https://jsfiddle.net/3w16q179/6/

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

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

Answer 4

您可以使用display: block或display: inherit;。

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

<强> JSFiddle

Answer 5

虽然您的问题不是很明确，但我认为您可以使用class。只需将任何类添加到要移动的输入中即可。

例如：

HTML

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

CSS

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

我希望有所帮助！

使用CSS移动输入单选按钮

5 个答案:

HTML

CSS