垂直堆叠 md-chips，同时将输入保持在顶部

Question

我一直在试用angular提供的md芯片，一直在尝试垂直堆叠。我看了演示，也看了这个答案：

Stack md-chips vertically angularjs

该答案的问题在于，随着添加更多筹码，输入字段会不断移动。我希望将输入字段保持在顶部，同时将筹码堆叠在输入字段下方。有没有什么方法可以通过可能改变 css 的任何方面或在那里有另一个输入字段来完成，或者 md-chips 不允许这样做吗？

Answer 1

与您提到的几乎相同的答案，但 float: none; 到容器。

md-chip {
  clear: left;
}

.md-chip-input-container {
    float: none;
}

CSS 位于 <style> 标签中，因为它需要在样式表

之后加载

angular
  .module('MyApp', ['ngMaterial'])
  .controller('demoCtrl', function($scope) {

    $scope.myChips = ['AAA', 'BBB', 'CCC'];
  });

<head>
  <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <style>
    md-chip {
      clear: left;
    }
    
    .md-chips {
      background-color: beige;
    }
    
    .md-chips .md-chip-input-container {
      float: none;
    }
    
    .md-chip-input-container .md-input {
      border: 1px solid black !important;
      margin-top: 8px;
    }
  </style>
</head>

<body>
  <div ng-controller="demoCtrl" ng-app="MyApp">
    <md-chips ng-model="myChips">
      <md-chip-template>
        <strong>{{$chip}}</strong>
      </md-chip-template>
    </md-chips>
  </div>
</body>

垂直堆叠 md-chips，同时将输入保持在顶部

Stacking md-chips vertically while keeping input on top

html

css

angularjs

md-chip