如何「凍結」塊級元素？

我有一個文本框和一個按鈕。當我增加按鈕的寬度時，它會將文本字段移過。我希望文本字段位於屏幕的中心，並且該按鈕位於正確的位置。爲什麼會發生這種情況，以及如何「凍結」文本字段並讓按鈕位於右側？如何「凍結」塊級元素？

HTML

<body> 
    <div id="container"> 
     <header> 
      <h1>content</h1> 
      <p>More content</p> 
     </header> 
     <main> 
      <h2>Add a ToDo!</h2> 
      <input type="text" placeholder="Enter your ToDo item!"></input> 
      <button type="button">Submit</button> 
     </main> 
    </div> 
    </body> 
</html>

CSS

body { 
    background-color: #2a2a2a; 
} 

#container { 
    background-color: gray; 
    height: 700px; 
    width: 1000px; 
    margin: 0 auto 0 auto; 
    text-align: center; 
} 

p { 
    width: 50%; 
    text-align: center; 
    margin: 0 auto 0 auto; 
    padding: 10px 0 10px 0; 
} 

button { 
    width: 100px; 
    height: 5px; 
}

來源

2014-12-28 chopper draw lion4

我相信這是會爲你工作。把位置：絕對到按鈕的CSS。

button { 
    position:absolute; 
    margin-left:5px; //added just for better appearance 
    width: 100px; 
    height: 25px; 
}

這是fiddle。

來源

2014-12-28 07:48:26

如何「凍結」塊級元素？

回答

相關問題