gpt4 book ai didi

javascript - 在输入线下方堆叠 md 芯片

转载 作者:行者123 更新时间:2023-11-28 15:13:03 27 4
gpt4 key购买 nike

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

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

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

关于javascript - 在输入线下方堆叠 md 芯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47748467/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com