lavezzi1
@lavezzi1

Резиновый инпут и кнопка в одном ряду?

Как сделать так, чтобы инпут и кнопка были в одном ряду, при этом инпут должен быть резиновым то есть занимать всю оставшуюся часть и сужаться при изменении экрана. Спасибо

codepen.io/anon/pen/RaVXOG?editors=1100
  • Вопрос задан
  • 2725 просмотров
Решения вопроса 3
@zhainar
Гуглю за вас
Ответ написан
Комментировать
Ответ написан
Комментировать
andykov
@andykov
Shit happens
<form>
  <input type="submit"> <!-- Кнопка должна быть первой в разметке -->
  <div class="field">
    <input type="text">
  </div>
</form>


form {
  width: 50%;
  margin: 50px auto;
}
input {
  box-sizing: border-box;
}
input[type="text"] {
  width: 100%;
}
.field {
  margin-right: 90px; /* Ширина кнопки + отступ */
}
input[type="submit"] {
  float: right;
  width: 80px;
}


https://jsfiddle.net/7zce4hjf/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы