在输入线下方堆叠 md 芯片

Question

我看到一些问题在垂直堆叠 md-chips 的同时保持输入顶部，但我想将 md-chips 堆叠在输入行下方，就像它在 google 和 pinterest 中的样子

我希望输入字段位于顶部，筹码应堆叠在该行下方
在这里我给出了垂直堆叠的代码
谢谢

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>

Answer 1

只需清除您编写的代码：

md-chip {
   clear: left;
}

Here CodePen example

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

Answer 2

我找到了一种解决方案，一种破解方法，或者通过不断更改我得到的属性来找到解决方案
这里是码笔
https://codepen.io/avreddy/pen/ppzraz

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

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

    
    .md-chips {
      background-color: beige;
      display: flex !important;
      flex-wrap: wrap;
    }
    .md-chips md-chip{
    order: 2;
    }
    .md-chips .md-chip-input-container {
     order: 1;
  width: 100%;
    }
    
    .md-chip-input-container .md-input {
      border: 1px solid black !important;
      margin-top: 8px;
    }

<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>
</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 芯片

stacking md-chips below the input line

html

javascript

css

angularjs

md-chip