Question

我有一个文本字段和一个按钮。当我增加按钮的宽度时，它会移动文本字段。我希望文本字段位于屏幕的中心，按钮位于右侧。为什么会发生这种情况？如何“冻结”文本字段并让按钮位于右侧？

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;
}

Answer 1

我相信这对你有用。将 position：absolute 放入按钮的css。

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

这是fiddle。

如何“冻结”块级元素？

1 个答案: