Chrome中的輸入按鈕位置已關閉？

當我在Firefox中打開頁面時，此電子郵件訂閱表單的輸入按鈕與輸入字段正確對齊，但在Chrome中看起來有點偏離。Chrome中的輸入按鈕位置已關閉？

有人能幫我弄清楚如何使它在Chrome中正確排列？非常感謝！

的HTML代碼：

<div id="socialmedia"> 

    <form action="********/account.php" name="digiSHOP" method="post"> 

     <input type="hidden" name="m" value="subscribe" /> 

     <input type="hidden" name="submit" value="true" /> 

     <input type="hidden" name="secret" value="a6887a2c4d7909f10a4e01778cdd4b02" /> 

     <input type="hidden" name="mailingListId" value="1" /> 

     <div class="form-label" > 
      <div class="nicelabel" > 
       <img border="0" src="updateme.gif" width="132" height="30"></a> 
      </div> 
      <div class="niceform" > 
       <input align="left" type="text" value=" your email" name="email" style="width:150px; height:24px; maxlength="80" value="" size="20" /> 
       <input class="edit-button" type="submit" value="" /> 
      </div> 
     </div> 
    </form> 
</div>

CSS樣式：

#socialmedia{ 
    float: left; 
    width: 350px; 
    height: auto; 
    margin-top: 15px; 
    margin-bottom: 0px; 
    margin-right: 0px; 
    margin-left: 0px; 
    text-align: left; 
} 

.form-label { 
    float: left; 
    width: 400px; height: 28px; 
    font-size: 1.5em; 
    margin: 10px 0 0 0; 
    text-align: left; 
} 

.nicelabel { float: left; text-align:left; width:132px; } 

.niceform { float: left; text-align:right; width:230px; } 

input, textarea {margin-left: 0px; }

截圖：

screenshot

來源

2012-09-23 SneakOut

這可能是一個小錯誤與您的代碼本身

<img border="0" src="updateme.gif" width="132" height="30"></a>

在這裏，你是給closing anchor tag沒有<a>隨時隨地，你也不會關閉img標籤像下面。

<img border="0" src="updateme.gif" width="132" height="30"/>

檢查通過糾正這些事情。

來源

2012-09-23 04:39:33

糟糕！謝謝你接受！（只是爲了澄清，原來的錯誤對手頭的問題沒有影響。） – SneakOut

這些不一致之處存在於不同的瀏覽器中。有兩種方法可以解決這一問題：

使用絕對定位

HTML

<form class="contact-form"> 
    email id <input type="text"/><input type="submit" value="submit" /> 
</form>

CSS

form.contact-form{ 
    position:relative; 
} 

form.contact-form input[type=text]{ 
    position:aboslute; 
    top:0; 
} 

form.contact-form input[type=submit]{ 
    position:absolute; 
    top:0; 
}

這種方法推形式的元素權利頂部，在轉，確保對齊。這裏JS小提琴 - >http://jsfiddle.net/xcpSg/

使用表格
表可以做你的工作了。 Facebook使用這種方法在他們主頁的頂部登錄表單。

來源

2012-09-23 04:40:51

'position：absolute;'拼寫錯誤在你的小提琴中。 –

感謝您提供表格，在CSS解決方案沒有任何影響的情況下解決了問題。儘管如此，我仍然認爲這必定是CSS中的一種解決方法。 – SneakOut

我假設你的意思是非表格，當你說CSS時，是的，有很多方法可以用CSS來做，它需要關於定位的絕對和/或相對的基本知識。在大多數情況下，最終產品將是相同的，並且完全取決於您作爲編碼器選擇哪種方法。 –

Chrome中的輸入按鈕位置已關閉？

回答

相關問題