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

Question

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

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

Answer 1

Html table 我想对这种情况很有用。您有什么理由不想或不能使用简单的 table？

Answer 2

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

看直播：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;
}

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