Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting an <input> button and an <a> to equal size in HTML

I've run across the following issue in HTML/CSS: For my (offline) site, there are a link and a submit button (which is inside a form) right next to each other, like this:

<a href='settings.php' class='button'>Settings </a>

<form action='processing/logout.php' method='POST' class='inline'>
    <input type='submit' value='Sign out' class='redbutton'>
</form>

When both of the elements are links, then they line up next to each other perfectly. Now, however, even though the link and button have the same CSS styling associated with them, then input button is annoyingly larger (in height) than the link (though it's barely visible when glancing over).

I created a jsFiddle to demonstrate.

People on other forums asked for the reset CSS, so I included that as well, even though deleting it doesn't remove the problem.

How can I get the link and the input button to be the same height? Is it something obvious I missed? Is there a CSS trick to get them to be the same height?

like image 479
LonelyWebCrawler Avatar asked Nov 11 '11 21:11

LonelyWebCrawler


People also ask

How do I make buttons the same size in HTML?

If you set the box-sizing property to content-box, the width and height will only include the content, and not the border, padding, or margin. So, to make all HTML buttons the same size, you would set the box-sizing property to content-box. Now all your buttons will be the same size, no matter what!

How do you make input and select elements the same width?

To create the inputs of the same width, we have to use some CSS attributes in our program. box-sizing: It defines how the height and width of the element are calculated. moz-box-sizing: It is supported in the Mozilla Firefox browser only. -webkit-box-sizing: It is supported in the Google Chrome browser only.

How do you make all text boxes the same size in HTML?

The key is to use the box-sizing: border-box property so when you specify the width that includes the border and padding. See excellent explanation here. Then the browser can't stuff it up. Code is below, have also set the height of the boxes to the same size and indented the text inside the box so it lines up.

How do you make a button on the same line?

If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.


2 Answers

The size of the (inline) anchor element is treated inconsistently across different browsers.

The solid solution is to place a button inside a link. Fiddle: http://jsfiddle.net/m5m5M/22/.

<a href='settings.php'><input type='button' class='button' value='Settings' /></a><form action='processing/logout.php' method='POST' class='inline'><input type='submit' value='Sign out' class='redbutton'>
<form>

Note that I have omitted whitespace between the buttons. That's because inline elements show a gap between each other when there's any whitespace in the HTML.

like image 114
Rob W Avatar answered Sep 22 '22 00:09

Rob W


Using display: inline-block on your button class should do the trick. http://jsfiddle.net/VB9RM/17/

like image 34
Leo Avatar answered Sep 21 '22 00:09

Leo