Как сделать ввод текста с плавающей правой кнопкой

Question

Я хочу создать текстовое поле для ввода, где я хочу текстовое поле слева и кнопку справа от ввода и прикрепить к нему текстовое поле ввода.Рассмотрите фрагмент HTML ниже ...

<div class="textbox-feild">
   <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
 <div class="button-field">
   <input type="button" class="buttonfield" value="Sign up now">
</div>

Answer 1

Вот как я это сделаю легко, используя только float: left;:
(я также исправил проблемы с опечатками, такие как feild)

.textbox-field,
.button-field {
  float: left;           /* All-in-one: display inline and avoid the gap between them */
}

<div class="textbox-field">
  <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
<div class="button-field">
  <input type="button" class="buttonfield" value="Sign up now">
</div>

Надеюсь, это поможет.

Answer 2

Вы можете использовать разные методы.

Просто проверьте скрипты:

display: inline-block';: - https://jsfiddle.net/vhxoqk8p/

float: left;: - https://jsfiddle.net/eg30js52/

display: inline-flex;: -https://jsfiddle.net/rpcesufb/

Answer 3

Попробуйте:

.contain {
  display: flex;
  flex-direction: row;
}

<div class="contain">
  <div class="textbox-feild">
    <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
  </div>
  <div class="button-field">
    <input type="button" class="buttonfield" value="Sign up now">
  </div>
</div>

Или :

Примените один и тот же класс к обоим и стилизуйте его с помощью inline-block следующим образом:

display: inline-block;

Answer 4

Добавьте display: inline-block к обоим div

.textbox-feild,
.button-field {
  display: inline-block;
}

<div class="textbox-feild">
  <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
<div class="button-field">
  <input type="button" class="buttonfield" value="Sign up now">
</div>

Answer 5

Делаем div inline-block;

.textbox-feild, .button-field {
    display: inline-block;
}

<style>
body {
  font-size: 0;
}
.textbox-feild, .button-field {
    display: inline-block;
    
}
input {
   font-size: 14px;
}
</style>
<div class="textbox-feild">
   <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
</div>
 <div class="button-field">
   <input type="button" class="buttonfield" value="Sign up now">
</div>

РЕДАКТИРОВАТЬ Используйте этот стиль, если вы не хотите оставлять пробел между входом и кнопкой

body {
  font-size: 0;
}
.textbox-feild, .button-field {
    display: inline-block;

}
input {
   font-size: 14px;
}

Answer 6

Используйте display:flex до warp div:

    .warp{
    display:flex;
    }

<div class="warp">
    <div class="textbox-feild">
       <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
    </div>
     <div class="button-field">
       <input type="button" class="buttonfield" value="Sign up now">
    </div>
 </div>

Вы можете сделать это с помощью display: inline-block;

    .textbox-feild,.button-field{
    display: inline-block;
    }

    <div class="textbox-feild">
       <input type="text" class="textfield" name="Email" placeholder="Email *" title="Email * is mandatory and it should be a valid email address">
    </div>
     <div class="button-field">
       <input type="button" class="buttonfield" value="Sign up now">
    </div>