如何让 <select> 内联显示？

Question

您好，我有一个简单的标签 "District" 和一个包含邮政编码列表的下拉列表。我只是想让标签和下拉菜单并排，水平在一条线上，但出于某种原因它会起作用。它保持垂直显示，如顶部的标签和底部的菜单。

这是我的 html:

<div class="filterButton leaflet-control">
     <span><i class="fa fa-filter fa-7x"></i>
      <label class="menu">District: </label>
      <select class="ml-1 menuContent" name="zipcode" [(ngModel)]="zipcode" (ngModelChange)="selectedZipcode()">
        <option>-All-</option>
        <option *ngFor="let zipcode of artworkList | duplicates ">{{zipcode}}</option>
      </select>
    </span>
  </div>

和我的 css:

.filterButton {
  margin-left: 43px;
  border-radius: 0;
  background-clip: padding-box;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-position: 50% 50%;
  cursor: pointer;
  text-align: center;
  background-color: #fff;
  padding: 3px;
 }

 .fa-filter:hover  {
   color: #5690C6;
 }

 .fa-filter {
  color: #1770a6;
  font-size: 21px;
  padding-left: 4px;
  padding-right: 4px;
  align-content: center;
 }

 .menu, .menuContent {
   display: inline;
  }

Answer 1

你应该让 display: inline;或显示：filterButton 上的内联块，元素的包装器。

如何让 <select> 内联显示？

how to get <select> to display inline?

css

select

inline

angular