字段对齐问题 Css答案

【问题标题】：fields alignment problem Css字段对齐问题 Css
【发布时间】：2011-07-16 03:02:48
【问题描述】：

嘿，这是我的问题，我无法将这些输入字段与这些图像对齐，它们在一个 div 中，我将粘贴下面的代码

那么你建议我应该怎么做，被这个问题困扰，需要一个快速的答案 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>

【问题讨论】：

需要 CSS 来知道它们现在是如何对齐的。

标签： css alignment vertical-alignment

【解决方案1】：

试试这个

http://jsfiddle.net/K8rHG/

【讨论】：

@theGame：您应该在名称中使用@，以便更快地交流！

【解决方案2】：

css:

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

【讨论】：

【解决方案3】：

一般来说，要垂直对齐 boxes，最好的方法之一是将它们全部设为 block box（这样它们就可以接受宽度和高度），然后设置所有的高度到最高的框，然后尝试垂直对齐每个框中的内容。在您的特殊情况下，搜索框的高度为 30px。但正如@Jawad 所说，您应该包含父 div 的 CSS，以及其他元素的 CSS，以便我们提供帮助。

【讨论】：

【解决方案4】：

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

【讨论】：

在这种情况下，它强制 IE7 块元素内联块

【解决方案5】：

尽量避免使用内联样式，是吗？
图像垂直居中，它们将与文本框对齐：

div img { 垂直对齐：中间； } 风格>

http://jsfiddle.net/mSgVg/

【讨论】：