如何将我的搜索按钮向右对齐？ [英] How can I align my search button to the right?

问题描述

我不太熟悉前端网页设计或CSS。

使用此模板：

 < ul class =right> 
< li class =search> 
< li class =has-button> 
 / *原始模板形式* / 
 {＃< form>＃} 
 {＃< input type =search>＃} 
 {＃< / form>＃} 
 
 / *我的表单代码为* / 
< form action ={{path（'sym_corp_search'）}}method =GET> 
< label>< input type =searchname =qvalue = {{app.request.query.get（'q'）}}>< / label& 
< input type =submitvalue =Searchstyle =float：right;> 
< / form> 
< / li> 
< / li> 
 
 / *原始形式按钮为蓝色* / 
< li class =has-button> 
< a class =small buttonhref =＃>搜索< / a> 
< / li> 
  

解决方案>

使用基础类，您可以管理使用自己的输入执行此布局，您的代码将如下所示：

 < ul class =right> 
< form action ={{path（'acme_demo_search'）}}method =GET> 
< li class =search> 
< label>< input type =searchname =qvalue ={{app.request.query.get（'q'）}}/>< / label& 
< / li> 
< li class =has-button> 
< input type =submitvalue =Searchclass =small button/> 
< / li> 
< / form> 
< / ul> 
  

I'm not well versed in front end web design or CSS. Using a pre-made template from Foundation, however my code for a search button is not aligning like the example button.

Using this template: http://foundation.zurb.com/templates/workspace.html

Can someone tell me how I can move the search button to the right as in pic where the blue button is located?

This is what I am using now:

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

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

解决方案

Using the foundation classes, you can manage to perform this layout with your own inputs, your code will look like this:

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

这篇关于如何将我的搜索按钮向右对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！