how to put several buttons inline with responsive design?

Question

Let i have a several number of buttons

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

I need to align all these buttons in a line, and all buttons should be visible, and it should adjust its width when new button is getting added. Button should be attached to each other.

Answer 1

You can use 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>