如何將此搜索框對齊到右側？

我剛剛開始掌握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>

感謝

來源

2010-12-15 lisovaccaro

添加'浮動：right'或'右：0;'你'.widget_search' CSS類 – cristian 2010-12-15 15:37:26

我的問題可以幫助你 http://stackoverflow.com/questions/21117707/how-to- align-one-form-element-within-a-li-with-the-other-li – Jammi 2014-01-14 16:11:13

你有一些選擇：

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元素中。

來源

2010-12-15 15:42:45 jack

添加text-align:right;您form和刪除不必要的div。

請注意，這僅適用於內聯元素：文本，輸入，錨點等。如果您想將框（div，表格，表格等）對齊到右側，則需要使用float:right;並設置高度在浮動物品的父級上，或者在漂浮物品的下方添加明確的div。另外，除了不必要外，作爲初學者，這種第二種方法對於你來說會更加複雜。

來源

2010-12-15 15:40:11

個人而言，我不會用一個列表

<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

來源

2010-12-15 15:41:18

他可能在該列表中有多個項目。你怎麼確定他的選擇是不合理的？ – 2010-12-15 15:43:36

@Alin +1因爲客觀！你是對的，「李」可能是合理的，儘管這是更大討論的一部分。我個人覺得'li'在項目之間沒有任何關係時會被過度使用。 – 2010-12-15 15:51:24

列表是新表:)。 – 2010-12-15 15:59:12

如何將此搜索框對齊到右側？

回答

相關問題