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

Question

我有一个注释表单，我想在右边的文本字段中显示submit按钮。以下是我到现在为止所做的：

​

.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>

​

使用此方法，表单将脱离屏幕。是否有更好的方法将提交按钮放置在文本字段中。提示：，我在使用引导带。

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>

演示