We have answer of your question!

100% solved queries, no empty question

Question: How to align <form> elements vertically?


0

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:

My problem

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>
Question author Roland | Source

Answer


1


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.

Answer author Santi

Tickanswer.com is providing the only single recommended solution of the question How to align <form> elements vertically? under the categories i.e html , css , forms , element , . Our team of experts filter the best solution for you.

Related Search Queries:


You may also add your answer

Thanks for contributing an answer to Tick Answer!