html - 高度可变的 div 内垂直对齐多个跨度(ui-select-multiple)

Question

我使用 AngularJS ui-select 中的多选。

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

如果 Span 较多，可以将其排列为多行。我想为此做很好的垂直对齐。

我成功地做到了一行:

_{(来源:cs630525.vk.me)}

但它在多行上失败:

_{(来源:cs630525.vk.me)}

_{(来源:cs630525.vk.me)}

“良好的垂直对齐” - 具有相同颜色的填充必须相等

_{(来源: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; 
}