當我調整瀏覽器的大小時，按鈕在屏幕上移動

當我調整瀏覽器的大小時，我的按鈕在頁面上的任何位置都會顯示。同樣在移動設備上，它並沒有定位在它應該在的位置。其他元素呢。你能幫我嗎？當我調整瀏覽器的大小時，按鈕在屏幕上移動

HTML：

<div id="wrapper"> 

     <div id="header"> 

      <div id="header-name"> 
       <table> 
        <tr> 
         <td id="header-name-cell"> 
          <a href="./index.html"> 
           Nl-Darts 
          </a> 
         </td> 
         <td> 
          Voor al uw dart nieuws! 
         </td> 
        </tr> 
       </table> 
      </div> 

     </div> 


     <div id="content"> 

      <div id="landingpage-intro"> 

       <h2>I gotta piss</h2> 
       <p> 
        Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. 
        You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. 
        We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, 
        we are connected, you and I. We're on the same curve, just on opposite ends. 
       </p> 

       <h2>No, motherfucker</h2> 
       <p> 
        Well, the way they make shows is, they make one show. That show's called a pilot. 
        Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. 
        Some pilots get picked and become television programs. Some don't, become nothing. 
        She starred in one of the ones that became nothing. 
       </p> 

      </div> 

      <div id="landingpage-button"><a id="landingpage-link" href="http://www.google.com">Go to full website</a></div> 

     </div> 


     <div id="footer"> 

     </div> 

    </div>

CSS：

body{ 
    background-image: url("../images/dart-wallpaper.jpg"); 
    background-attachment: fixed; 
    background-size: cover; 
} 

#wrapper{ 
    height: 100%; 
    width: 100%; 
} 

#content{ 
    position: relative; 
    top: 60px; 
    left: 10%; 

    width: 80%; 
    min-height: 500px; 
    height: auto; 

    background-color: rgba(0, 0, 0, 0.5); 
    color:white; 

    border-radius: 10px; 
} 



#landingpage-button{ 
    width:290px; 
    height: 50px; 
    background-color: rgba(208, 208, 208, 0.7); 

    text-align: center; 
    line-height: 50px; 

    position: inherit; 
    left: 40%; 
    top: 50px; 

    border-radius:5px; 
}

我試着像改變相對位置/絕對有的各種各樣的事情，但它仍然保持移動多件事情。

還有沒有人有更多的技巧來思考何時定位元素？

在此先感謝

來源

2015-10-28 Sam

它的作用就像是因爲你左屬性設置爲40％。它將始終嘗試從左側40％。從#landingpage-button

position: inherit; 
left: 40%; 
top: 50px;

，並添加：刪除，如果你希望把它放在中心的它的容器

margin: 50px auto 0; //50px from top, auto left-right and 0px to bottom

執行此操作。我舉了一個例子here。

來源

2015-10-28 15:38:43

非常感謝你這是答案。我必須再等8分鐘來標記你的答案。我會標記它。 – Sam

弗羅林的答案應該可以工作，但我想推薦使用em而不是px。 Em可以用作相對測量單位。

來源

2015-10-28 15:41:47

當我調整瀏覽器的大小時，按鈕在屏幕上移動

回答

相關問題