Question

我正在使用包含文本框和提交按钮的搜索表单...出于某种原因，我对2个元素（input =文本和div顶部的按钮）存在对齐问题，特别是在chrome中。

你能告诉我这是什么问题吗？

HTML＆amp; CSS

  <form id="bigsearchform_new" method="post" >
      <input id="search_string" name="search_string" type="text" class="startnewsearch rounded" placeholder="Search..." maxlength="500" /><input id="bigsearchbutton_new"  type="button" class="searchButton" title="Click here to search the database"/>
        <input type="hidden" name="antiCSRF" value="{{acsrf}}" />
        <input type="hidden" name="session_id" value="{{session_id}}" />
        <input type="hidden" name="commodity_id" id="commodity_id" />
  </form>

        </div>

JSFiddle

Answer 1

输入元素垂直未对齐，因为它们具有内联布局和不同的高度。其中一个选项是使用vertical-align属性middle/bottom/top（例如）值：

input {
   vertical-align : middle;
}

Example

Answer 2

您的按钮缺少value属性：

<input id="bigsearchbutton_new"
       type="button" 
       class="searchButton" 
       title="Click here to search the database" 
       value="Go" />

See Fiddle

多个div的对齐问题

2 个答案: