Jquery dform插件单选按钮对齐答案

【问题标题】：Jquery dform plugin radio button alignmentJquery dform插件单选按钮对齐
【发布时间】：2016-09-15 19:52:48
【问题描述】：

我对 Javascript 还很陌生，正在努力创建一个简单的表单，包括单选按钮。这是我创建的小提琴：

我的 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：身体 { 字体系列：无衬线；填充：10px； }

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

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

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

但没有运气。

如果我删除显示：块；组件所有字段水平对齐。我只想水平对齐单选按钮选项。

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

谢谢

【问题讨论】：

标签： jquery html jquery-plugins

【解决方案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>

【讨论】：