javascript - 数据表标题中的格式问题

Question

我正在尝试将一些额外的元素添加到我的数据表网格的标题中，并且除了搜索框向下移动一行之外，所有元素都在工作。如何使单选按钮居中，并使搜索框与其他按钮显示在同一行？它与 <"Clear"> 有关系吗？

这是JS：

$(document).ready(function () {

    var tbl = $('#EACApprovalGrid').dataTable({
        "bProcessing": true,
        "bDeferRender": true,
        "oLanguage": {
            "sSearch": "Search:",
        },
        "iDisplayLength": 25,
        "bStateSave": false,
        "sPaginationType": "full_numbers",
        "aaSorting": [[5, "asc"]],
        "sDom": '<"top"l<"EacEcrRadioRegion">f>rt<"bottom"p<"clear">>'
    });


    var btns = '<input type="radio" class="EacEcrSelection" name="EacEcrSelection" id="EacRadio" value="EAC" /> EAC&nbsp;&nbsp;&nbsp;'
            + '<input type="radio" class="EacEcrSelection" name="EacEcrSelection" id="EcrRadio" value="ECR" /> ECR&nbsp;&nbsp;&nbsp;'
            + '<input type="radio" class="EacEcrSelection" name="EacEcrSelection" id="BothRadio" value="Both" /> Both'
    $(".EacEcrRadioRegion").html(btns);


    $('#EacRadio').click(function() {tbl.fnFilter("EAC",0);});
    $('#EcrRadio').click(function() {tbl.fnFilter("ECR",0);});
    $('#BothRadio').click(function() {tbl.fnFilter("",0);});

});

这是一个小提琴：http: //jsfiddle.net/7KkpQ/3/

这是一个截图http://imgur.com/1N6ABtP （在你问之前 - 是的，它发生在 IE、FF 和 Chrome 中）

Answer 1

这可能非常接近：http: //jsfiddle.net/7KkpQ/9/

额外的CSS如下：

.EacEcrRadioRegion {
    text-align: center;
    float: left;
    width: 50%;
}

#example_filter {   
    float: right;
}