Html 使用CSS移动输入单选按钮_Html_Css

Html 使用CSS移动输入单选按钮

html css

Html 使用CSS移动输入单选按钮,html,css,Html,Css,我想在每个选项下移动我的单选按钮。第一个选项下的Radiobutton“test1”和第二个选项下的Radiobutton“test2”。也就是说，单选按钮位于选择的下方，但彼此相邻我该怎么做？我不希望使用表格或br。我想用；我应该如何设计我的CSS <form name="test"> <label style="float:left;">test</label> <input style="display:block" />

我想在每个选项下移动我的单选按钮。第一个选项下的Radiobutton“test1”和第二个选项下的Radiobutton“test2”。也就是说，单选按钮位于选择的下方，但彼此相邻

我该怎么做？我不希望使用表格或br。我想用；我应该如何设计我的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>


测试
测试
测试
1.
2.
A.
B

如果我添加了多个收音机盒：

我尝试在CSS中使用

（相邻兄弟选择器），但我认为这是因为位置是绝对的。所以下一个“子对象”不会水平对齐。我认为这是最简单的方法

所以我试着相对地定位它（第一个无线电框）和

float:left

。但是它的位置太高。

您可以使用

display:block

或

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

虽然你的问题不太清楚，但我认为你可以使用类。只需将任何类添加到要移动的输入
例如：
HTML
我希望这有帮助
 这里是每个select元素下面的每个单选按钮，只使用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;
}

jsiddle演示：
超过2个单选按钮：
jsiddle演示：啊哈！我刚知道你在找什么。。。每个单选按钮都位于“选择”按钮的中心。我明白了
<!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>


表格*{
框大小：边框框；
}
形式{
背景：白色；
宽度：420px；
填充：8px；
边框：1px纯灰；
}
字段集{
文本对齐：居中；
边界：0；
填充：0；
}
标签{
宽度：33.33%；
浮动：对；
填充：6px；
}
传奇{
显示：块；
浮动：左；
宽度：33.33%；
保证金：0；
}
A.
B
一个更长的声音
B
选择一个：

jsIDLE:
这将对齐选择输入下方的单选按钮，而不管其宽度如何

input[type=“radio”]{
显示：块；
}

测试
测试
测试
1.
2.
2.
3.
不理解您的问题，请详细说明。您可以用表格或图像向我们展示您想要达到的输出吗？@Ultimater当然很抱歉，如果我的英语不好。@RajeshPatel抱歉，我将添加图像以使其更简单。我不希望使用表格或br您是否尝试蒙上眼睛？一只手被绑在背后？他说他不想和你一起使用
标记。我没看到br
，答案更新了。@jiff谢谢你的回复。继承是如何工作的？在这种情况下，它继承了什么？我不是专家。欢迎你，不过这看起来不是一个有用的答案，我刚才看到了你的最新图片。无论如何，如果您使用display:inherit
它将为self获取父属性
。如果选择的输入具有可变宽度，则此操作将失败@萨加斯兰：你说得对。肮脏的修正是在选择元素上设置固定的宽度。@Moogs很好的建议；我还是个新手，但在你的帮助下（最后一个孩子），我已经学会了新的东西：[@SageArslan super，感谢您扩展问题并创建解决方案。感谢大家的贡献！@Moogs只是一个后续问题；如果有两个以上的无线电视盒，我会怎么做。因为它不会自动扩展。谢谢，对您的解决方案很满意，但我添加了一个新的皱纹，请检查更新的post、 单选按钮是垂直排列的，在每个select下？还是在一行中？还有，横向排列的数量是多少，彼此相邻。前两个单选按钮在select下排列；与JSFIDLE中完全相同。但是，一行中的单选按钮数量是可变的（水平排列）在第二个单选按钮之后。用文字解释这些事情有点棘手。请查看文章底部的更新图片。我在这里列出了我能想象到的所有排列方式：查看表单控件的名称以及“for”标签中的属性。我正在复制每个列中输入的名称，假设用户只使用一个。如果我错了，好吧，你明白了。你的HTML格式不正确。例如，它缺少
和标记。可能会有所帮助。非常感谢@Sage Arslan，我为问题添加了另一个维度。如果你请查看我的最新问题。
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;
}

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