角材质md-选择多个水平对齐

Question

我正在将Angular Material md-select与multiple标志一起使用

<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>

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

我想水平列出它们。 所以代替：

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或类似的内容中，则会得到以下信息：

我也在Github上进行了报道，但是我不确定他们是否认为它是一个错误，因此我试图找到一种无需重写或更改模块本身的工作。

Answer 1

CSS：

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

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