對齊html輸入並提交

我有一個荒謬的問題，我的輸入文本字段和提交按鈕沒有排隊，我真的不知道如何解決它的優雅解決方案。正如你可以在下面的圖片，輸入文本字段（右上角標有「請輸入關鍵詞」「）中看到的是2px的比更高的‘搜索’的提交按鈕：對齊html輸入並提交

Input field is 2px above submit button

下面是HTML：

<div id="search"> 
    <form action="#" method="POST" id="search_form"> 
     <div id="search_inputs"> 
      <input type="text" placeholder="Enter Keywords" name="keywords" /> 
      <input class="button" type="submit" name="search" value="SEARCH" /> 
     </div> 
    </form> 
</div>

這裏是CSS代碼：

#search_form .button { 
    background: black; 
    color: white; 
    padding: 3px 15px; 
    border: none; 
    font-size: 7pt; 
    height: 18px; 
} 

#search_form input[name="keywords"] { 
    width: 175px; 
} 

#search { 
    margin-top: 7px; 
    float: right; 
}

我敢肯定，設置字體大小，以7PT是搞亂它，但我不知道爲什麼，我不知道如何處理這個，因爲這是該區域其他按鈕的字體大小。

感謝您的幫助！

來源

2012-04-30 jrubins

將'margin-top：2px'添加到您的關鍵字輸入無法修復它？（或-2px的按鈕） –

不，我試過了，它似乎只是將一切向上或向下移動，但保持輸入字段之間的不均勻定位 – jrubins

你確定沒有更多的CSS可能會影響這個？我創建了一個jsFiddle，它排隊很好。 – j08691

將float: left;添加到#search_form input[name="keywords"]風格對齊的頂部正確，然後添加一些margin-right應該讓你很好去。

Fiddle

問題從float: right搜索按鈕莖。輸入框有一個自然的display: inline-block，它會導致輕微的下降。通常，當你正確地修正這個問題時，就是在DOM中向上移動該元素。這在這種情況下不起作用。通過改變輸入到浮動元素，你也迫使它成爲display: inline。

雖然我不確定爲什麼你不能只爲元素添加display: inline。

來源

2012-04-30 02:26:14 Brombomb

這工作，但我不明白髮生了什麼事？這可能是來自上面提到的@ j08691之類的其他CSS的干擾嗎？ – jrubins

這不是干涉，因爲小提琴在沒有應用任何附加樣式的情況下顯示相同的行爲。 – Brombomb

對齊html輸入並提交

回答

相關問題