How can I align my search button to the right? - css

Question

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>

Answer 1

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>

Answer 2

You have to use margin property like margin-left:50%; or more and you can also use ... tag but it will make button position to center. float:right is can be used in div, Not in button.

Answer 3

Move your button in a div :<div id="mybtn"><input type="submit" value="Search"></div> add CSS : #mybtn {float : right;display : inline-block;}