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

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

基本上，将input和button包装在固定宽度的相对容器中，然后使用右侧的position: absolute放置按钮。

Answer 2

只需为按钮添加样式;

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

Answer 3

<强> CSS

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

<强> HTML

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

<强> demo