如何使用响应式设计将多个按钮放在同一行？

Question

假设我有若干个按钮

  <button ng-repeat="a in graphdata" class="inline">

我需要将所有按钮排成一行，所有按钮都应该可见，并且在添加新按钮时应该自动调整宽度。每个按钮应该相互依附。

- vishnuprasad kv

Answer 1

您可以使用 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>

- Nenad Vracar

Answer 2

你应该使用弹性容器包裹你的按钮。

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

- 3rdthemagical