如何“冻结”块级元素？

我有一个文本框和一个按钮。当我增加按钮的宽度时，它会将文本字段移过。我希望文本字段位于屏幕的中心，并且该按钮位于正确的位置。为什么会发生这种情况，以及如何“冻结”文本字段并让按钮位于右侧？如何“冻结”块级元素？

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

如何“冻结”块级元素？

回答

相关问题