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

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>