假设我有若干个按钮
<button ng-repeat="a in graphdata" class="inline">
我需要将所有按钮排成一行,所有按钮都应该可见,并且在添加新按钮时应该自动调整宽度。每个按钮应该相互依附。
您可以使用 flexbox
。
$('.new').click(function() {
$('.element').append('<button class="inline">Button</button>');
});
.element {
display: flex;
}
button {
flex: 1;
background: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="new">Add new Button</button>
<div class="element">
<button class="inline">Button</button>
</div>
你应该使用弹性容器包裹你的按钮。
<style>
.wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap; /* if you want buttons in several lines */
}
button {
min-width: 50px;
}
</style>
<div class="wrapper">
<button ng-repeat="a in graphdata" class="inline"></button>
</div>