2014-02-06 55 views
5

由於某種原因,它將按鈕置於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> 
+0

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

+0

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

+0

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

回答

1

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

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