Question

我设法将我的提交按钮和我的输入放在cakephp的同一行，但是当我用图像替换无聊的灰色提交按钮时，两个不再对齐。相反，输入显示比以前低8px，图像显示在正确的高度。

<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;}

结果并不完全相同，但两种输入在两种情况下都看起来更像 inline （on更像是top-align而另一种更像是center-align）。

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

1 个答案: