Как выровнять раскрывающийся список 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;} 

Но диапазон и выпадающий список не выровнены должным образом в то же line.in некоторые браузеры хорошо выглядеть, но некоторые из браузеров, показывая, как ниже.

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;