如何将搜索按钮对齐？

Question

我不熟悉前端网页设计或CSS。使用Foundation中的预制模板，但是我的搜索按钮代码没有像示例按钮那样对齐。

使用此模板：http://foundation.zurb.com/templates/workspace.html

有人可以告诉我如何将搜索按钮向右移动，就像在蓝色按钮所在的图片中那样？

这就是我现在使用的：

<input type="submit" value="Search" style="float: right;">

小提琴：Search button code

<ul class="right">
<li class="search">
    <li class="has-button">
        /* Original template form */
        {#<form>#}
            {#<input type="search">#}
        {#</form>#}

        /* My form with code */
        <form action="{{ path('sym_corp_search') }}" method="GET">
            <label><input type="search" name="q" value={{ app.request.query.get('q') }}></label>
            <input type="submit" value="Search" style="float: right;">
        </form>
    </li>
</li>

/* Original form button in blue */
<li class="has-button">
    <a class="small button" href="#">Search</a>
</li>

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>
</ul>

Answer 2

你必须使用保证金属性，如margin-left：50％;或者更多，您也可以使用...标签，但它会使按钮位置居中。 float：right可以在div中使用，不在按钮中。

Answer 3

在div中移动按钮：
<div id="mybtn"><input type="submit" value="Search"></div>
添加CSS：
#mybtn {
float : right;
display : inline-block;
}