单选按钮不与标签内联

Question

我在JsFiddle有这个代码

<form>
    <div style="margin:0;padding:0;display:inline"></div>

    <div class="field">
        <label for="input_user_id">User ID</label>
        <input class="form-control" id="input_user_id" name="input_user_id" type="text" placeholder="" value="KING0002" readonly>
    </div>

    <div class="field">
        <label for="input_name">Name</label>
        <input class="form-control" id="input_name" name="input_name" type="text" placeholder="Name">
    </div>

    <div class="field">
        <label for="input_password">Password</label>
        <input class="form-control" id="input_password" name="input_password" type="password" placeholder="Password">
    </div>

    <div class="field">
        <label for="credit">Credit </label>
        <input class="form-control" id="credit" name="credit_limit" type="text" placeholder="Credit">
    </div>

    <div class="field">
        <div class="form-group">
            <label for="create_member">Can Create Member</label>
            <input type="radio" name="create_member" value="no" checked>No &nbsp;&nbsp;
            <input type="radio" name="create_member" value="yes">Yes
        </div>
    </div>
</form>

我正在为我的文本字段、表单控件类使用 twitter 引导程序，我尝试添加单选按钮

例如

Can Create Member:  yes [] no []

但输出显示是和否在彼此之上。

无论屏幕分辨率如何（无论是移动设备还是桌面设备），我如何更改为具有正确的内联单选按钮并且对齐方式与文本字段大致相同

Answer 1

那是因为您为所有 input 元素分配了 50% 的宽度。只需使用not 排除radio 输入，如下所示

.field input:not([type="radio"]) {
    width: 50%;
    margin: 0px;
  }

DEMO