Angular Material md-select 多个水平对齐

Question

我正在使用带有 multiple 标志的 Angular Material md-select

<div layout="row"
  <md-input-container class="md-block" flex-gt-sm>
    <label>Pick State</label>
    <md-select multiple flex ng-model="main.selectedData.State">
      <md-option ng-repeat="(key, value) in main.State" value="{{value.value}}">
        {{value.display}}
      </md-option>
    </md-select>
  </md-input-container>
</div>

当我 select 我的多个选项时，控制器端的一切都按预期工作，但在视图中我的选项垂直堆叠。

我想水平列出它们。所以而不是：

AR,
CA

我会得到：

AR, CA

我认为问题是渲染出来的DOM是这样的：

<md-select-value class="md-select-value" id="select_value_label_1">
  <span>
    <div class="md-container">
      <div class="md-icon"></div>
    </div>
    <div class="md-text ng-binding">
        AR
    </div>
    ,
    <div class="md-container">
      <div class="md-icon"></div>
    </div>
    <div class="md-text ng-binding">
        CA
    </div>
  </span>
  <span class="md-select-icon" aria-hidden="true"></span>
</md-select-value>

因此，如果我尝试将自己的 CSS 添加到 float: left 或类似的东西，我会得到：

我已经报告了这个 on Github as well，但我不确定他们是否认为这是一个错误，所以我试图找到一个解决方法，而不是重写或改变模块本身。

Answer 1

css:

    ._md-container{
      display: inline-block;
    }

http://codepen.io/nsuthar0914/pen/pbgxWo

Angular Material md-select 多个水平对齐

Angular Material md-select multiple align horizontally

html

javascript

css

angularjs

angular-material