Как показать кнопку отправки внутри текстового поля

Question

У меня есть форма для комментариев, где я хочу показать кнопку отправки в текстовом поле с правой стороны. Вот что я сделал до сих пор:

.flex1 { 
 
    display: flex; 
 
} 
 
.flex2 { 
 
    flex: 1; 
 
}

<form class="comment-form" method="get"> 
 
    <img src="image" alt=""> 
 
    <p class="flex1"><input type="text" class="form-control flex2" placeholder="Leave a comment..."> <button type="submit" class="btn btn-info">comment</button></p> 
 
</form>

Используя этот метод, форма выйти из экрана. Есть ли лучший способ поместить кнопку отправки в текстовое поле. Подсказка: Я использую Bootstrap.

Answer 1

CSS

input[type="text"] { 
    width: 200px; 
    height: 40px; 
} 
button { 
    position: absolute; 
    left: 165px; 
    top: 10px; 
} 

HTML

<input type="text" /> 
<button>Submit</button> 

demo

Answer 2

Предполагая, что вы не обязаны использовать Flexbox, вот codepen я сделал достижения того, что вы хотите.

http://codepen.io/habovh/pen/rLxJdM

В основном, оберните input и button в фиксированной ширины относительной емкости и поместите кнопку с помощью position: absolute справа.

Answer 3

Просто добавьте стиль к вашей кнопке;

<button type="submit" class="btn btn-info" style="position: absolute;right: 0;margin-top: -34px;">comment</button>