如何在文本字段中显示提交按钮

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

假设你没有被迫使用flexbox,这是我实现你想要的代码.

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

基本上,将您的inputand 包装button在固定宽度的相对容器中,然后使用position: absolute右侧的按钮.