如何使输入字段和单选按钮平行答案

【问题标题】：How to make both input fields and radio buttons parallel如何使输入字段和单选按钮平行
【发布时间】：2015-11-11 04:56:47
【问题描述】：

我有一些用户输入字段以及一些单选按钮，如下所示：

我正在引导样式。尝试了很多方法来实现它。任何人都请帮我建议一种方法来做到这一点.. 提前非常感谢。

【问题讨论】：

你能做个小提琴吗
提供你迄今为止尝试过的代码？
看我为你创建的例子，如果你需要任何帮助，请告诉我
你知道如何接受答案吗？ @blackwindow

标签： html css twitter-bootstrap radio-button user-input

【解决方案1】：

HTML 表对我想象的这种情况很有用。你有什么理由不想要或不能使用简单的表格吗？

【讨论】：

【解决方案2】：

您可以使用表格轻松解决它。检查以下代码。

观看直播：JSFIDDLE

HTML：

<table class="t1">
    <tr>
        <td></td>
        <td></td>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" name="" id=""></td>
        <td><input type="radio" name="a1" id=""></td>
        <td><input type="radio" name="a1" id=""></td>
        <td><input type="radio" name="a1" id=""></td>
    </tr>
    <tr>
        <td>2</td>
        <td><input type="text" name="" id=""></td>
        <td><input type="radio" name="a2" id=""></td>
        <td><input type="radio" name="a2" id=""></td>
        <td><input type="radio" name="a2" id=""></td>
    </tr>
    <tr>
        <td>3</td>
        <td><input type="text" name="" id=""></td>
        <td><input type="radio" name="a3" id=""></td>
        <td><input type="radio" name="a3" id=""></td>
        <td><input type="radio" name="a3" id=""></td>
    </tr>
</table>

CSS：

table.t1 tr td {
    padding:5px 20px 5px 5px;
}

table.t1 tr td:nth-of-type(1),
table.t1 tr td:nth-of-type(2){
    padding-right: 5px!important;
}

【讨论】：

@blackwindow，我已经稍微修改了我的代码以满足您的要求。您可以检查这是否有帮助。

【解决方案3】：

使用 Bootstrap 看这个例子：

示例：JSFIDDLE

<div class="container">
    <div class="row radioLabel">
        <label>A</label>
        <label>B</label>
        <label>C</label>
    </div>
    <div class="row">
        <div class="col-md-12 well rowCell">
            <label>A</label>
            <input type="text" />
            <input type="radio" name="A" checked />
            <input type="radio" name="B" />
            <input type="radio" name="C" />
        </div>
        <div class=" col-md-12 well rowCell">
            <label>B</label>
            <input type="text" />
            <input type="radio" name="A" />
            <input type="radio" name="B" checked/>
            <input type="radio" name="C" />
        </div>
        <div class="col-md-12 well rowCell">
            <label>C</label>
            <input type="text" />
            <input type="radio" name="A" />
            <input type="radio" name="B" />
            <input type="radio" name="C" checked />
        </div>
    </div>
    <div>

【讨论】：

@blackwindow 你也可以提供电台标题
是的。但是单选按钮是如此接近。我想保持单选按钮平行并保持一些空间。我也希望它像一个 div 部分。每三组单选按钮上都有标题。你能帮我更新你的答案吗..
@blackwindow 看到这个更新的小提琴jsfiddle.net/kevalbhatt18/7rav8fkd/3
@blackwindow 我现在更新答案如果你想要更多空间然后增加填充