Question

处有此代码

<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 bootstrap作为我的textfield，表单控件类，我试图添加单选按钮

e.g

Can Create Member:  yes [] no []

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

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

Answer 1

这是因为你给所有input元素提供了50％的宽度。只需使用radio排除not输入，如下面的

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

DEMO

单选按钮不与标签内联

1 个答案: