javascript - Angular Material 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>

当我选择多个选项时，一切都在 Controller 端按预期工作，但在 View 中我的选项垂直堆叠。

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

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