如何让 <select> 显示内联？答案

【问题标题】：how to get <select> to display inline?如何让 <select> 显示内联？
【发布时间】：2019-06-22 00:55:19
【问题描述】：

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

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

【问题讨论】：

你能创造一个小提琴之类的吗？ jsfiddle.net/o6gk7qx3 您提供的代码似乎对我有用。
@Elliot 抱歉，但谢谢！它在你的小提琴上工作的事实真的让我很困扰，我只是注意到我的全局样式文件中有一个重叠属性用于
你知道如何让它动画化吗？如，开始视图我只想成为图标，当一个人将鼠标悬停在它上面时，菜单只会在右侧滑出......

标签： css angular select inline

【解决方案1】：

你应该做 display: inline;或显示：filterButton 上的 inline-block，即元素的包装器。

【讨论】：

正如@Oly 所说。默认情况下，div 元素将显示为块元素。此外，请确保 .ml-1 没有任何规则可能会阻止您使用 .menu, .menuContent 选择器尝试进行样式设置。