如何在同一行中對齊span和html下拉列表？

Question

我設計的用戶界面如下所示。

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

但是跨度和下拉列表在同一行中排列不正確。在某些瀏覽器中看起來不錯，但在某些瀏覽器中顯示如下所示。

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;