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!