I am looking to place two HTML buttons next to each other on the same line

Question

I am looking to place two HTML buttons next to each other on the same line

I am trying to display two HTML buttons next to each other on the same line, with the "Submit Request(s)" button appearing first. The issue I am facing is that the top of the second button aligns with the bottom of the first one. The second button is correctly positioned to the right due to the margin-left: 50px property. Here's the HTML code for both buttons:

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

html css

Answer 1

Answer №1

Before using any code, consider trying a Codepen or JsFiddle to test your ideas.

I recommend checking out my solution here:

This simple solution involves adding 2 classes and defining button types (submit and reset) with these classes to easily format them side by side.

Answer 2

Before using any code, consider trying a Codepen or JsFiddle to test your ideas.

I recommend checking out my solution here:

This simple solution involves adding 2 classes and defining button types (submit and reset) with these classes to easily format them side by side.

Answer 3

Answer №2

Here's a neat little solution for you: http://jsfiddle.net/cau4t/

<div class="wrapper">
    <button onclick="javascript:submitRequests();">Submit Request(s)</button>
    <button onclick="javascript:document.location.reload(true);">Reset</button>
</div>

.wrapper {
    overflow: hidden;
}

button {
    float: left;
}

button:first-child {
    margin-right: 50px;
}

Answer 4

Here's a neat little solution for you: http://jsfiddle.net/cau4t/

<div class="wrapper">
    <button onclick="javascript:submitRequests();">Submit Request(s)</button>
    <button onclick="javascript:document.location.reload(true);">Reset</button>
</div>

.wrapper {
    overflow: hidden;
}

button {
    float: left;
}

button:first-child {
    margin-right: 50px;
}

Answer 5

Answer №3

I discovered that simply removing the spaces between the two buttons resolved the issue of them being misaligned. This problem occurred within a Drupal webform, which appears to be sensitive to extra spacing.

Answer 6

I discovered that simply removing the spaces between the two buttons resolved the issue of them being misaligned. This problem occurred within a Drupal webform, which appears to be sensitive to extra spacing.

I am looking to place two HTML buttons next to each other on the same line

Answer №1

Answer №2

Answer №3

Similar questions

Encountering obstacles when attempting to save form information to a MongoDB database using Node.js

Dynamic jQuery backstretch feature: automatic image cycling and reversing

Using a video as a background in HTML

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

"How to automatically populate an input field with a value when the page loads in an

Scaling divs proportionately using a container

Top methods for incorporating whitespace on both sides of the page

Why is the current Menu Item highlight feature not functioning properly?

Javascript issue: opening mail client causes page to lose focus

Data streaming using Node.js

Altering information with the use of history.pushState throughout time

What is the method for defining a CSS property for the ::before pseudo element within an Angular component?

What causes the Footer to appear as a floating element in Tailwind CSS?

Sticky position applied and overlapping with the following container

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

What is the best way to use PHP strip_tags to filter out HTML and Script tags while keeping XML untouched?

What is the best way to customize the default button style for buttons in Angular Datables?

A linear gradient effect originating from the center/middle of the background

A combination table featuring both fixed and scrolling columns

Tips for creating a smooth scrolling header menu on a standard header