如何在同一行中对齐span和html下拉列表？

Question

I designed the UI like the below.

<div class="rightbadger">
    <span id="filterRecords">
        Number of Results Per Page
        <%:Html.DropDownList(
            "filterByPageNumber", 
            Model.ResultPerPage,
            null,
            new { onchange = "GetResultsPerPage()" }
        )
        %>
    </span>
</div>

CSS:

.rightbadger { margin-left: 600px;}

But span and dropdown list are not aligned properly in same line.in some browsers are looking good but some of the browsers showing like the below.

Answer 1

Just put the CSS

.filterRecords select{
    display:block;
}

Answer 2

If you want to align them vertically you probably should put the text into a separate element, like so:

<div class="rightbadger">
    <div id="filterRecords">
        <span>Number of Results Per Page</span>
        <%:Html.DropDownList(
            "filterByPageNumber", 
            Model.ResultPerPage,
            null,
            new { onchange = "GetResultsPerPage()" }
        )
        %>
    </div>
</div>

Then vertical align the 2 element as you want them to be:

#filterRecords span,
#filterRecords select{ /*or just '#filterRecords *' */
    vertical-align: bottom; /*or middle; or top; */
}

Answer 3

You must to set for span and dropdown:

float:left;
width:300px;
display:block;