如何正確對齊此提交按鈕？

我有一個提交按鈕的表單很大，我需要對齊按鈕。問題是，當我使用float: right時，提交元素被從正常文檔流中取出。這意味着窗體的高度降低，並且它的底部邊框會干擾按鈕。如何正確對齊此提交按鈕？

下面的代碼：

<html> 
<head> 
    <style type="text/css"> 
     #left-col { 
      width: 290px; 
     } 
     #loginForm { 
      border: 1px solid black; 
     } 
     #submit { 
      /* float: right; */ 
     } 

    </style> 
</head> 
<body> 
    <div id="left-col"> 
     <div id="loginForm"> 
      <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action=""> 
       <label for="email" class="required">Email</label> 
       <input type="text" name="email" id="email" value=""> 
       <label for="password" class="required">Password</label> 
       <input type="password" name="password" id="password" value=""> 
       <input type="submit" name="submit" id="submit" value="Login" class="submit"> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

的形式編程方式（使用Zend_Form的），所以我希望能避免需要額外的元素（：既有如用清晰的段落）黑客產生。

希望這將是一個CSS大師的簡單問題！

謝謝...

來源

2012-01-11 Kim Prince

所有議題元素是內聯，所以我會承擔提交將在最右邊。 – Ibu 2012-01-12 00:00:53

使用float：right;在FF和鉻沒有改變我的形式的大小。你能更具體地瞭解你想改變或預防的事情嗎？ – 2012-01-12 00:01:08

您想在哪裏標註與文本框相關的內容？ – JamesB41 2012-01-12 00:01:36

您可以使用CSS :after pseudoelement清除容器，無需添加任何額外的HTML標記。

您將添加這樣的事情你的CSS：

#loginForm:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

或者到form元素，無論你認爲更合適。

來源

2012-01-12 00:02:10 justis

謝謝jblasco，這是一個熱門提示 – 2012-01-12 00:32:32

這是我製作的jsFiddle演示 - http://jsfiddle.net/tm8bY/1/ - 展示你應該如何實現你想要的。

複製在演示中使用的代碼：

<html> 
<head> 
    <style type="text/css"> 
     #left-col { 
      width: 290px; 
     } 
     #loginForm { 
      border: 1px solid black; 
     } 
     #submit { 
      /* float: right; */ 
     } 
     label { 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <div id="left-col"> 
     <div id="loginForm"> 
      <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action=""> 
       <label for="email" class="required">Email</label> 
       <input type="text" name="email" id="email" value=""> 
       <label for="password" class="required">Password</label> 
       <input type="password" name="password" id="password" value=""> 
      </div> 
      <div style="text-align: right"> 
       <input type="submit" name="submit" id="submit" value="Login" class="submit"> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

_{注：我使用的內嵌樣式可以轉換爲CSS class代替。我還爲label添加了一條規則，因此看起來更具風格。}

來源

2012-01-12 00:03:05 stealthyninja

如果我沒有記錯，你想要的提交按鈕的邊框內則 http://jsfiddle.net/bTp2K/1/

<html> 
<head> 
    <style type="text/css"> 
     #left-col { 
      width: 290px; 
     } 
     #loginForm { 
      border: 1px solid black; 
     } 
     #submit { 
      /* float: right; */ 
     } 

    </style> 
</head> 
<body> 
    <div id="left-col"> 
     <div id="loginForm"> 
      <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action=""> 
       <label for="email" class="required">Email</label> 
       <input type="text" name="email" id="email" value=""> 
       <label for="password" class="required">Password</label> 
       <input type="password" name="password" id="password" value=""> 
      </div> 
       <div style="text-align: right"> 
       <input type="submit" name="submit" id="submit" value="Login" class="submit"> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-01-12 00:04:55 chchrist

要使形式（或任何元素）擴展到包含內部花車，應用「溢出：汽車」風格，爲每10.6.7 of the CCS 2.1 spec最後一段：

此外，如果該元素具有任何浮動後代，其底部邊緣邊緣元素的底部邊緣的內容下面，那麼高度增加到包括叔軟管邊緣。只考慮參與該塊格式化上下文的浮點數，例如，絕對定位的後代或其他浮點數內的浮點數不是。

根據第10.6.6節。同一規格的，除其他事項外，它適用於：

塊級「溢出」不計算爲「可見」（當在正常流動的非替換元素，除非在「溢出」屬性的值已經傳播到視口）。

來源

2012-05-14 07:25:28

-1

[type=submit]{ 

    margin-left: 121px; 
    margin-top: 19px; 
    width: 84px; 
    height: 40px; 
    font-size:14px; 
    font-weight:700; 

}

來源

2015-04-23 12:06:30

雖然這個答案可能是正確的和有用的，但如果你包括一些解釋用它來解釋它是如何幫助解決問題的。如果存在導致其停止工作並且用戶需要了解其曾經工作的變化（可能不相關），這在未來變得特別有用。 – 2015-04-23 12:37:09

如何正確對齊此提交按鈕？

回答

相關問題