如何显示内联？

Question

嗨，我有一个简单的标签“区”和下拉列表的邮政编码。我只想让标签和下拉列表并排放置在一条线上，但由于某种原因它会起作用。它会一直垂直显示，如顶部标签和底部菜单。

这是我的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

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