Как я могу выровнять мою кнопку поиска справа?

Question

Я не очень разбираюсь в веб-дизайне или CSS. Используя предварительно созданный шаблон из Foundation, однако мой код для кнопки поиска не выравнивается, как кнопка примера.

Используя этот шаблон: http://foundation.zurb.com/templates/workspace.html

Может кто-нибудь сказать мне, как я могу переместить кнопку поиска справа, как на рис, где синяя кнопка расположена?

Это то, что я использую сейчас:

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

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

Вы должны использовать маржу свойство как Левое поле : 5 0%; или больше, и вы также можете использовать ... тег, но он сделает положение кнопки в центре. float: right можно использовать в div, а не в кнопке.

Answer 3

Переместите кнопку в DIV:
<div id="mybtn"><input type="submit" value="Search"></div>
добавить CSS:
#mybtn {
float : right;
display : inline-block;
}