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

Question

我设计了如下的UI。

<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;}

但是span和下拉列表没有在同一行中正确对齐。在某些浏览器看起来不错但有些浏览器显示如下。

Answer 1

只需输入CSS

.filterRecords select{
    display:block;
}

Answer 2

如果你想垂直对齐它们，你可能应该把文本放到一个单独的元素中，如下所示：

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

然后根据需要垂直对齐2元素：

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

Answer 3

您必须设置跨度和下拉列表：

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