如何将我的搜索按钮向右对齐？答案

【问题标题】：How can I align my search button to the right?如何将我的搜索按钮向右对齐？
【发布时间】：2014-07-13 07:26:47
【问题描述】：

我不精通前端网页设计或 CSS。使用 Foundation 的预制模板，但是我的搜索按钮代码与示例按钮不对齐。

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

谁能告诉我如何将搜索按钮向右移动，如图中蓝色按钮所在的位置？

这是我现在使用的：

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

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

【问题讨论】：

你能发个小提琴吗？
更新了代码，虽然看起来很奇怪
jsfiddle.net/X344d
@MuhammadAli 不，这不起作用。这使我的搜索按钮略微向左，但它仍然在底部。
jsfiddle.net/W2Yst/5 我更新了你的代码

标签： css search button

【解决方案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>

【讨论】：

【解决方案2】：

你必须使用 margin-left:50%; 这样的 margin 属性。或更多，您也可以使用 ... 标签，但它会使按钮位置居中。 float:right 可以在 div 中使用，不能在按钮中使用。

【讨论】：

【解决方案3】：

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

【讨论】：

试过了，搜索按钮仍然留在底部。同样，我认为是现有的 CSS 阻止了按钮向上移动。