字段 alignment 问题 Css

Question

Hey this is my problem, i can not align tis input field with these images, they are in a div, i will paste the code below

So what do you suggest should i do, stuck with this problem, need a quick answer plz

<div style="margin-bottom: 5px;"> 

 <input type="text" id="queryInput" value="pizza" style="width: 180px; height:30px;border: 1px solid #d3d6d9;padding: 4px 10px 2px 10px;background-color: white;-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;border-radius: 5px;  font-size: 12px;   font-family: Droid Sans, Arial, sans-serif;"/> 
 <a href="javascript:doSearch()"><img src="img/search.png" /></a> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 <a href="javascript:toggleStreetView()"><img src="img/street.png" /></a>
 <a href="javascript:toggleGoogleView()"><img src="img/google.png" /></a>

</div> 

Answer 1

Try this

http://jsfiddle.net/K8rHG/

Answer 2

css:

#queryInput {
    margin-top: -10px;
    float: left;
}

Answer 3

Generally, to align boxes vertically, one of the best methods are to make'em all block box (so they can accept width and height), then set the height of all of them to the highest box, then try to vertical-align contents in each box. In your special case, the height of search box is 30px. But as @Jawad said, you should include the CSS of the parent div, with CSS of other elements, so that we can help.

Answer 4

 div input, div a{
    display:inline-block;
    vertical-align:top;
    float:none;
    margin:0px;
    .display:inline;
    .zoom:1;
}

Answer 5

1. try to avoid inline styles, yes?

2. vertically center the images, and they will align w the textbox:

   < style> div img { vertical-align:middle; } < / style>

http://jsfiddle.net/mSgVg/