Jquery dform插件单选按钮对齐(Jquery dform plugin radio button alignment)

 我是Javascript的新手，并致力于创建一个包括radiobuttons的简单表单。 这是我创造的小提琴： 
 
 http://jsfiddle.net/nax97af6/ 
 
 我的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：body {font-family：sans-serif; 填充：10px; } 
 
label, input {
    display: block;
    margin-top: 10px;
}
 
 我试图对齐单选按钮选项，即水平是或否。 其余的应该是垂直的。 到目前为止，我已尝试使用dform插件页面上建议的css选项和类选项 
 
 https://github.com/daffl/jquery.dform 
 
 但没有运气。 
 
 如果我删除显示：块; 组件所有字段都水平对齐。 我想只水平对齐radiobutton选项。 
 
 任何指导，以帮助我学习和纠正这个问题非常感谢。 
 
 谢谢 

I am fairly new to Javascript and working on creating a simple form including radiobuttons. This is the fiddle which I created:
 
http://jsfiddle.net/nax97af6/
 
My 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"
    }
]
})    
 
My CSS: body { font-family: sans-serif; padding: 10px; }
 
label, input {
    display: block;
    margin-top: 10px;
}
 
I am trying to align the radio button options i.e. Yes or No horizontally. The rest of them should be vertical. So far, I have tried using css option and class option as suggested on the dform plugin page
 
https://github.com/daffl/jquery.dform
 
but no luck. 
 
If I remove the display: block; component all the fields get aligned horizontally. I want to only align the radiobutton options horizontally. 
 
Any pointers to help me learn and rectify the issue is greatly appreciated.
 
Thank you

原文：https://stackoverflow.com/questions/39519304