Как «заморозить» элемент уровня блока?

У меня есть текстовое поле и кнопка. Когда я увеличиваю ширину кнопки, она сдвигает текстовое поле. Я хочу, чтобы текстовое поле находилось в центре экрана, а кнопка была правильной. Почему это происходит и как я могу «заморозить» текстовое поле и позволить кнопке быть справа?Как «заморозить» элемент уровня блока?

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

Как «заморозить» элемент уровня блока?

ответ

Смежные вопросы