如何将此搜索框右对齐？

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

将text-align:right;添加到您的form并删除不必要的div。

请注意，这只适用于内联元素:文本、输入、锚点等。如果您需要框(div、表单、表等)。要向右对齐，您需要使用float:right;并在浮动项的父项上设置高度，或者在浮动项下面添加一个清晰的div。此外，对于初学者来说，除了不必要之外，第二种方法使用起来会更加复杂。

Answer 3

就我个人而言，我不会使用列表

<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