Question

我对Javascript很新，并致力于创建一个包含radiobuttons的简单表单。这是我创造的小提琴：

我的HTML

<form id="myform"></form>

的Javascript

$("#myform").dform({
    "action" : "index.html",
    "method" : "get",
    "html" :
    [
        {
            "type" : "p",
            "html" : "Edit Rule"
        },
        {
            "name" : "ruleid",
        "id" : "ruleid",
        "caption" : "Rule ID",
        "type" : "text",
        "placeholder" : "NRF_Rule_123"
    },
    {
        "name" : "rulepriority",
        "id" : "rulepriority",
        "caption" : "Rule Priority",
        "type" : "number",
        "placeholder" : "3"
    },
    {
        "name" : "rulebody",
        "id" : "rulebody",
        "caption" : "Rule Definition",
        "type" : "div",
        "html" :
        [
            {
                "type" : "text"
            }
        ],
        "placeholder" : "Define your rule body here"
    },
   {
        "name" : "ruleenabled",
        "type":"radiobuttons",
       "id": "radiobuttonalign",
        "caption" : "Make rule available for use",
        "options" : {
            "No" : "No",
            "Yes" : {
                "checked" : "checked",
                "caption" : "Yes"
            }
        }
    },
    {
        "type" : "submit",
        "value" : "Save rule"
    }
]
})

我的CSS：身体 { font-family：sans-serif; 填充：10px; }

label, input {
    display: block;
    margin-top: 10px;
}

我正在尝试对齐单选按钮选项，即水平是或否。其余的应该是垂直的。到目前为止，我已尝试使用dform插件页面上建议的css选项和类选项

https://github.com/daffl/jquery.dform

但没有运气。

如果我删除了display：block;组件所有字段都水平对齐。我想只水平对齐radiobutton选项。

非常感谢任何帮助我学习和纠正这个问题的指示。

谢谢

Answer 1

将“ inline-block ”类用于您的单选按钮和标签，请参阅以下代码

$("#myform").dform({
    "action" : "index.html",
    "method" : "get",
    "html" :
    [
        {
            "type" : "p",
            "html" : "You must login"
        },
        {
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "placeholder" : "E.g. user@example.com"
        },
        {
            "name" : "password",
            "caption" : "Password",
            "type" : "password"
        },
         {
            "name" : "ruleenabled",
            "type":"radiobuttons",
           "id": "radiobuttonalign",
            "caption" : "Make rule available for use",
            "options" : {
                "No" : "No",
                "Yes" : {
                    "checked" : "checked",
                    "caption" : "Yes"
                }
            }
        },
        
    ]
});

body {
    font-family: sans-serif;
    padding: 10px;
}

label, input {
    display: block;
    margin-top: 10px;
}

input[type="radio"], label {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://daffl.github.io/jquery.dform/release/jquery.dform-1.1.0.js"></script>

<form id="myform"></form>

Jquery dform插件单选按钮对齐

1 个答案: