How do I align this search box to the right?

I'm just starting to get the hang of HTML. I can't manage to align this to the right, it's part of a menu. I basically want it to align the search box to the right so it looks like facebook or something like that. Till now I've been using padding but I cann开发者_如何学运维ot keep it going any longer.

<li id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
    <div>
    <input class="ubicacion" type="text" value="" name="s" id="s">
    <input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
    </div>
    </form></li>

Thanks

You have some options:

keep the div(bad way)
add align"right" to the div
on the form and remove the div (better way)
use float:right
text-align: right

And place that on the form and remove the div.

Also I recommend putting styling in a css and not in the html elements.

Personally I wouldn't use a list

<div id="search-10" class="widget_search">
  <form role="search" method="get" action="http://chusmix.com/">
    <div style="text-align: right;">
    <input class="ubicacion" type="text" value="" name="s" id="s">
    <input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
    </div>
  </form>
</div>

And I would also suggest you experiment with text-align

Add text-align:right; to your form and remove the unnecessary div.

Note that this will only work for inline elements: text, inputs, anchors, etc. If you want boxes (divs, forms, tables, etc.) to align to the right you need to use float:right; and set a height on the parent of the floated item, or add a clear div bellow the floated item. Also, besides being unnecessary, this second approach would be more complicated to use for you, as a beginner.