css絕對位置提交按鈕右下角不起作用

由於某種原因，它將按鈕置於div右邊的右上角。就好像右上角的div右上角一樣。css絕對位置提交按鈕右下角不起作用

如果我添加底部10px，例如，它將在div上方開始並將其向上移動10px。同樣的事情發生右

CSS：

 #newSignupContent { 
      display: block; 
      position: relative; 

      width: 400px; 
      height: 250px; 
      margin: auto auto; 
     } 

     #newSignupContent label { 
      display: inline-block; 
      float: left; 
      clear: left; 
      width: 40%; 
      padding-right: 10px; 

      text-align: right; 
      color: white; 
      font-family:calibri, Times, serif; 
      font-size: 22px; 

     } 

     #newSignupContent input { 
      display: inline-block; 
      width: 50%; 
      float: left; 
      padding: 5px 10px 5px 0px; 
     } 

     #newSignupContent #newSignupSubmit { 
      position: absolute; 
      bottom: 0; 
      right: 0; 

      width: 80px; 
      height: 40px; 

      padding: 5px 10px 5px 10px; 
     }

表：

<div id="newSignupContent"> 
        <form action="/webroot/NewUserSignUpProcess" method="post"> 

         <label>Account Name:</label> 
         <input type="text" name="txtAccountName"> 

         <label>Email Address:</label> 
         <input type="text" name="txtEmailAddress"> 

         <label>Password:</label> 
         <input type="text" name="txtPassword"> 

         <input id="newSignupSubmit" type="submit" value="Submit"> 

        </form> 
       </div>

來源

2014-02-06 user2654735

你有更多的CSS或重置可能會影響到這？無法重現，如下圖所示：http://jsfiddle.net/NPeG8/ –

只是一個* {position：relative;填充：0} – user2654735

我剝離了所有外部div來測試。這是沒有道理的，因爲我以前使用過這個相同的設置，它工作得很好。 – user2654735

因爲* {position:relative;}你有沒有，你的按鈕位置它自身相對於「form的'元素。 'form'元素沒有高度，因爲它的所有後代都有'float:left;'，因此沒有「拉伸」表格的高度。 'submit'按鈕的位置'bottom:0;right:0;'相對於沒有高度的表單，導致看起來像包含'div'的右上角。

在所附的Fiddle Demo，請注意，如果你刪除了「position:relative;」形成「form」元素，一切都是正確設置。我還爲包含'div'和'form'的邊框添加了邊框。

來源

2014-02-18 15:28:41

css絕對位置提交按鈕右下角不起作用

回答

相關問題