Как выровнять это окно поиска справа?

Question

Я только начинаю понимать HTML.Я не могу выровнять это вправо, это часть меню.Я хочу, чтобы оно выровняло окно поиска по правому краю, чтобы оно выглядело как Facebook или что-то в этом родеДо сих пор я использовал отступы, но больше не могу его поддерживать.

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

Спасибо

Answer 1

У вас есть несколько вариантов:

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

И поместите это в форму и удалите div.

Также я рекомендую поместить стили в css, а не в html элементы.

Answer 2

Лично я бы не использовал список

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

И я бы также предложил вам поэкспериментировать с text-align

Answer 3

Добавьте text-align:right; к вашему form и удалите ненужные div.

Обратите внимание, что это будет работать только для встроенных элементов: текста, входных данных, якорей и т. Д. Если вы хотите, чтобы поля (div, формы, таблицы и т. Д.) Выравнивались вправо, вам необходимо использовать float:right; и установить высота на родительском элементе всплывающего элемента или добавьте прозрачный div ниже всплывающего элемента. Кроме того, этот второй подход, помимо ненужности, будет более сложным для использования вами, как новичком.