Alignment of submit button inside an inline-form

Ever noticed that the vertical alignment of a button inside of an inline form is always out of whack? It seems as if there is a 1px margin-top applied to the button but no such margin shows up at Chrome Developer Tools.

Inside a simple form, it is relatively simple. Assuming you use bootstrap just use the inline-from class in the form tag.

At the moment I have a form that each input tag is inside a list tag and as a result, the submit button seems a little lower than other line tags. I guess I could simply give it a -1 margin-top or apply a margin to all the other inputs or add a padding to other list tags but there must be a better solution.

1 hour later: I still haven’t found any good solution, for the moment just added a top:-1px, humiliating. One day I’ll be back at the head of an army and that’s a promise.

2 hours later: watching Just Shoot Me series. By the way, what were we talking about? Oh! right

2.5 hours later: It has something to do with a plugin I use that processes hotels booking.

5 days later: since the day I tried to solve this I stumbled upon flexbox. I had seen flexbox here and there but I never thought that would be something I dig into until this problem with submit button. It seems that the easiest way to tackle this and every other align problem in CSS positioning going to be flexbox. Hurray!

Leave a Reply

Your email address will not be published. Required fields are marked *