具有可变高度的 div 内的多个垂直对齐跨度（ui-select-multiple）

Question

我使用来自AngularJS ui-select 的多选。

我的多选看起来像这样 http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview

如果有很多跨度，则可以将其排列成多行。我想为此做一个很好的垂直对齐。

我设法做到了一行：

_{（来源：cs630525.vk.me）}

但它在多行上都失败了：

_{（来源：cs630525.vk.me）}

_{（来源：cs630525.vk.me）}

"nice vertical alignment" - 相同颜色的填充必须相等

_{（来源：cs630525.vk.me）}

HTML

  <ui-select multiple class="ui-select-container ui-select-multiple ui-select-bootstrap form-control dropdown" 
             ng-model="multipleDemo.colors" ng-disabled="disabled">
      <ui-select-match class="ui-select-match" placeholder="Select colors...">{{$item}}</ui-select-match>
      <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
      </ui-select-choices>
  </ui-select>

CSS

.ui-select-multiple.ui-select-bootstrap {
  padding: 0 3px;
  min-height: 34px;
  height: auto;
  width: 300px;
}

.ui-select-match {
  display: inline;
  vertical-align: baseline;
}

.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
  min-height: 32px;
  margin: 0;
}

.ui-select-multiple.ui-select-bootstrap > div {
  min-height: 32px;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

我该怎么做？

Answer 1

将以下代码添加到您的 css 中

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item { 
   display:block; 
}