Question

我正在使用rails表单，无论我如何安排他们的CSS和类，无线电按钮都固执地保持中心对齐。更重要的是，我无法让它们与按钮标签一起显示内联。它们在标签上方显示一行。标签左对齐。

表格：

<%= form_tag students_path, :method => 'get' do %>
  <%= text_field_tag :search, params[:search] %>

  <%= radio_button_tag(:whichParam, "studentNum", :checked => true)  %>
  <%= label_tag(:studentNum, "Student Number") %>  
  <%= radio_button_tag(:whichParam, "last_name") %>
  <%= label_tag(:last_name, "Last Name") %>

  <%= submit_tag "Search", :name => nil %>

<% end %>

对于CSS，我试过

.radio {
    display: inline;
}

.label {
   display: inline;
}

我还尝试删除所有引用单选按钮或标签的CSS。

我的猜测是我必须在CSS中的某个位置使用另一条线来导致按钮显示中心。但我找不到任何其他可能影响这一点的部分。

提前感谢您的任何见解。

Answer 1

要使标签与按钮内联显示，您需要使用这样的无线电内联类：

<form method="get" action="log_table_view.php" onsubmit="return       submit_query_form_check();" enctype="multipart/form-data">
                <label>Log for Year</label>
                <select id="year" name="year">
                    <option value="">Select Year</option>
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                </select>
                <br>
                <label>From</label>
                <select id="frommonth" name="frommonth">
                    <option value="">Select Month</option>
                </select>
                <select id="fromdate" name="fromdate">
                    <option value="">Select Date</option>
                </select>
                <label>To</label>
                <select id="tomonth" name="tomonth">
                    <option value="">Select Month</option>
                </select>
                <select id="todate" name="todate">
                    <option value="">Select Date</option>
                </select>
                <br>
                <label>Query</label>
                <select name="query" id="query">
                    <option value="">Select</option>
                    <option value="time">Time</option>
                    <option value="ip">Server IP</option>
                    <option value="username">Username</option>
                    <option value="nasip">Nas IP</option>
                    <option value="groupname">Group name</option>
                    <option value="cmd">CMD</option>
                    <option value="callerid">Caller ID</option>
                    <option value="realname">Real Name</option>
                    <option value="network_device_group">Network Device Group</option>
                </select>
                <select name="filter" id="filter">
                    <option value="">filter</option>
                    <option value="like">%</option>
                    <option value="equal">=</option>
                </select>
                <input type="text" placeholder="Search Text" name="search_text" id="search_text">
                <label>AND</label>
                <label>Sub-Query</label>
                <select name="subquery" id="subquery">
                    <option value="">Select</option>
                    <option value="time">Time</option>
                    <option value="ip">Server IP</option>
                    <option value="username">Username</option>
                    <option value="nasip">Nas IP</option>
                    <option value="groupname">Group name</option>
                    <option value="cmd">CMD</option>
                    <option value="callerid">Caller ID</option>
                    <option value="realname">Real Name</option>
                    <option value="network_device_group">Network Device Group</option>
                </select>
                <select name="subfilter" id="subfilter">
                    <option value="">filter</option>
                    <option value="like">%</option>
                    <option value="equal">=</option>
                </select>
                <input type="text" placeholder="Search Text" name="sub_search_text" id="sub_search_text">
                <button type="submit" class="search">Search</button>
            </form>

function submit_query_form_check() {
    var year = $("#year").val();
    var frommonth = $('#frommonth').val();
    var fromdate = $('#fromdate').val();
    var tomonth = $('#tomonth').val();
    var todate = $('#todate').val();
    var query = $('#query').val();
    var subquery = $('#subquery').val();

    if (year == "") {
        alert("Year Not Selected");
        $("#year").focus();
        return false;
    }
    if (frommonth == "") {
        alert("From Month Not Selected");
        $("#frommonth").focus();
        return false;
    }
    if (fromdate == "") {
        alert("From date Not Selected");
        $("#fromdate").focus();
        return false;
    }
    if (tomonth == "") {
        alert("To Month Not Selected");
        $("#tomonth").focus();
        return false;
    }
    if (todate == "") {
        alert("To date Not Selected");
        $("#todate").focus();
        return false;
    }
    if (query != "") {
        var filter = $('#filter').val();
        var search_text = $('#search_text').val();
        if (filter == "") {
            alert("You have not selected any filter for query");
            $('#filter').focus();
            return false;
        } else if (search_text == "") {
            alert("You have not input any search text for query");
            $('#search_text').focus();
            return false;
        } else if (query == "groupname") {
            if (filter != "like") {
                alert("With Group Name Query You Can Only Use Like Filter");
                $('#filter').focus();
                return false;
            }
        }
    }
    if (subquery != "") {
        var subfilter = $('#subfilter').val();
        var sub_search_text = $('#sub_search_text').val();
        if (query == "") {
            alert("You have not selected any for query before using sub query");
            $('#query').focus();
            return false;
        }
        if (subfilter == "") {
            alert("You have not selected any sub filter for query");
            $('#subfilter').focus();
            return false;
        } else if (search_text == "") {
            alert("You have not input any sub search text for query");
            $('#sub_search_text').focus();
            return false;
        } else if (subquery == "groupname") {
            if (subfilter != "like") {
                alert("With Group Name Query You Can Only Use Like Filter");
                $('#subfilter').focus();
                return false;
            }
        }
    }

    return true;
}

单选按钮不会左对齐或内联

1 个答案: