Поместить input и button в одну линию без пробела

Question

Необходимо поместить форму input и кнопку на одной линии без пробела, сделать их одного размера, а также требуется чтобы они соответствовали адаптивной верстке.

Answer 1

.subscribe {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.subscribe input,
.subscribe button {
  display: block;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  box-sizing: border-box;
}

.subscribe input {
  border: 1px solid #ccc;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.subscribe button {
  border: 1px solid #ccc;
  border-radius: 0 6px 6px 0;
  background: #00cfae;
  color: #fff;
  text-transform: uppercase;
}

<div class="subscribe">
  <input type="text">
  <button>subscribe</button>
</div>

Answer 2

.form {
  display: flex;
  justify-content: center;
}

.form__email {
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.form__btn {
  background: #03d8b6;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 8px;
  text-transform: uppercase;
  color: white;
  border-left: none;
  font-size: 16px;
  font-family: sans-serif;
}

input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}



<form class="form">
    <input type="email" class="form__email" placeholder="Email Address">
    <button class="form__btn">SUBSCRIBE</button>
  </form>

БЛОГ НА HUSL

Поместить input и button в одну линию без пробела

Ответы (2 шт):