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

Question

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

引导造型。尝试了很多方法来实现它。任何人请帮我建议一个方法来做..事先非常感谢。

Answer 1

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

查看直播：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 2

使用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>

的

Answer 3

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