2 HTML buttons that I want to be next to each other on the same line

Question

I have two HTML buttons that I want to be next to each other on the same line as the first (Submit Request (s)) to be the first. The problem I am facing is that the top of the second button starts where the bottom bottom button ends. The second button is correctly moved to the right due to the margin-left element: 50px. I have listed the HTML from the two buttons below:

<button style="float: left;" onclick="javascript:submitRequests();"> Submit Request(s) </button> <button style="float: left; margin-left: 50px" onclick="javascript:document.location.reload(true);"> Reset </button> 

Answer 1

try using Codepen or JsFiddle to add your code or idea.

I suggest you look at how I applied this solution: http://cdpn.io/uKLga

You see that just add 2 classes and define these types of buttons (submit and reset) so that these classes help you format the site.

Answer 2

This should do the trick: http://jsfiddle.net/cau4t/

 <div class="container"> <button onclick="javascript:submitRequests();">Submit Request(s)</button> <button onclick="javascript:document.location.reload(true);">Reset</button> </div> .container { overflow: hidden; } button { float: left; } button:first-child { margin-right: 50px; } 

Answer 3

As it turned out, all I had to do was get rid of the spaces between the two buttons, and now they no longer shift. It was in a Drupal web form that seems to be picky about extra sites.