Menu
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?
479
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!
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.
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.
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.
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.
114
Using display: inline-block on your button class should do the trick. http://jsfiddle.net/VB9RM/17/
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
