html - cakephp - 在同一行获取提交按钮和文本输入并用图像替换按钮的 css 定位问题

Question

我已经设法让我的提交按钮和我的输入在 cakephp 中位于同一行，但是当我用图像替换无聊的灰色提交按钮时，这两个按钮不再对齐。相反，输入显示在它原来位置下方 8 像素处，并且图像显示在正确的高度。

<div class="searchForm">
    <?php
        echo $form->create('User');
        echo $form->input('Search for a friend\'s page', array('div'=>false));
        $options = array('type'=>'image','src' => 'img/searchbutton.gif','div' =>false);
        echo $form->end($options);
    ?>
</div>

这是CSS:

label{display:block;}
input[type=text]{width:255px;height:30px;border:1px solid #ddd;padding:3px;background:url(../img/formfieldbg.gif) repeat-x;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}

所有输出:

<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/cakeproject/users/display" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
<label for="UserSearchForAFriend'sPage">Search For A Friend's Page</label>
<input name="data[User][Search for a friend's page]" type="text" id="UserSearchForAFriend&#039;sPage" />
<input type="image" src="img/searchbutton.gif" value="Submit" /></form> 
</div>

有哪位好心人能给我指出正确的方向吗？

Answer 1

我的评论部分错误，部分正确:

问题似乎是 input[type=text] 在 vertical-align:bottom;
当 input[type=image] 处于 vertical-align:top;

时

因此，在您的 css 中添加任意一行:

input[type=image] {vertical-align: bottom;}

或

input[type=text] {vertical-align:top;}

结果并不完全相同，但在两种情况下，两个输入看起来都更内联(一个更像是顶部对齐，另一个更像是中心对齐)。