我有一个文本字段和一个按钮。当我增加按钮的宽度时，它会移动文本字段。我希望文本字段位于屏幕中央，按钮位于右侧。为什么会发生这种情况以及如何“卡住”文本字段并让按钮位于右侧？
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;
}
最佳答案
我相信这对您有用。 将 position:absolute 放入按钮的 CSS。
button {
position:absolute;
margin-left:5px; //added just for better appearance
width: 100px;
height: 25px;
}
这是一个 fiddle .
关于html - 我如何 'freeze' block 级元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27674433/