How to align <form> elements vertically?

Question

I'm trying to make a copy of Google's search site from 2003 as a HTML exercise but I ran into a problem. I have finally managed to create an unordered list next to an input field but I don't want that text input to move alongside with the last item of the list as you can see below:

Could you tell me what I'm supposed to do in order to move that <input> field next to "Advanced search"?

This is my code:

 ul { text-align: left; font-size: 12px; margin: 0px auto; display: inline-block; } 

 <form action="http://www.google.com/search" method="get"> <div style="text-align:center"> <input type="text" name="q" placeholder="Search on Google" style="width: 380px" > <ul> <li>Advanced search</li> <li>Preferences</li> <li>Language tools</li> </ul> </div> </form> 

My whole code

Answer 1

hello you can do this simply by adding extra css

 float:right;
 margin-top:auto;

see below hope it helps.

 ul { text-align: left; font-size: 12px; float:right; display: inline-block; margin-top:auto; } 

 <form action="http://www.google.com/search" method="get"> <div style="text-align:center"> <input type="text" name="q" placeholder="Search on Google" style="width: 380px" > <ul> <li>Advanced search</li> <li>Preferences</li> <li>Language tools</li> </ul> </div> </form> 

Answer 2

You can apply a vertical-align: top; to your input by adding this to your CSS:

input {
    vertical-align: top;
}

Here's an example: JSFiddle

inline-block elements will align to the bottom of their container because the default for vertical-align is baseline . By instead applying vertical-align: top , the element will align itself with the top of its container.

---

I'm realizing now it may have been a better decision to instead mark this question as a duplicate. Your question is nearly identical to the one seen here: Align inline-block DIV's to top of container element

Consider reading this for a more detailed explanation.