如何在表单中使用此模板搜索按钮代替我的提交按钮？

Question

前端设计的新手，因为我主要在后端工作。问题是，我有一个我在Foundation使用的模板：http://foundation.zurb.com/templates/workspace.html

我尝试使用我的按钮（灰色的按钮）代替他们的按钮（蓝色的按钮）但由于某种原因，我的提交按钮不会向上移动而不是模板蓝色按钮。

所以，我想在下面的图片中使用他们的蓝色按钮，而不是我的表单提交中的搜索按钮。

如何使用他们的按钮代替表单提交按钮？

搜索HTML代码

<ul class="right">
    <li class="search">
        <li class="has-button">
            {# My search form #}
            <form action="{{ path('acme_demo_search') }}" method="GET">
                <label><input type="search" name="q" value={{ app.request.query.get('q') }}></label>
                <div class="btn">
                <ul class="right">

                    <div class="btn">
                        <div>
                            <input type="submit" value="Search" style="">
                        </div>
                    </div>

               </ul>
               </div>
            </form>
        </li>
    </li>

    {# Blue Search button code from the Foundation template #}
    <li class="has-button">
        <a class="small button" href="#">Search</a>
    </li>
</ul>

Answer 1

在基础中你可以在输入元素中使用按钮样式来维护它的样式概念，使用带有基础样式的提交按钮只需使用：

<ul class="right">
<form action="{{ path('acme_demo_search') }}" method="GET">
    <li class="search">
        <label><input type="search" name="q" value="{{ app.request.query.get('q') }}" /></label>
    </li>
    <li class="has-button">
        <input type="submit" value="Search"  class="small button" />
    </li>
</form>