Html 如何将此搜索框向右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4451699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I align this search box to the right?
提问by lisovaccaro
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 cannot keep it going any longer.
我刚刚开始掌握 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>
Thanks
谢谢
回答by Hyman
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.
并将其放在表单上并删除 div。
Also I recommend putting styling in a css and not in the html elements.
此外，我建议将样式放在 css 中，而不是放在 html 元素中。
回答by Alin Purcaru
Add text-align:right;to your formand remove the unnecessary div.
添加text-align:right;到您的form并删除不必要的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.
请注意，这仅适用于内联元素：文本、输入、锚点等。如果您希望框（div、表单、表格等）向右对齐，您需要使用float:right;并在父元素上设置高度浮动项目，或在浮动项目下方添加一个清晰的 div。此外，除了不必要之外，作为初学者，第二种方法使用起来会更复杂。
回答by Alan Whitelaw
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
我还建议你尝试 text-align
