在CSS中可视地加入按钮和文本字段

Question

在我正在构建的网络论坛中（在Django / Python中），一个功能是用户可以编写快速单行回复（推文长度），然后为所有参与者提交查看。目前，这就是我提出的简单形式：

我应该在HTML / CSS中进行哪些更改，而不是如下呈现我的表单：

我正在寻找一种完全响应的解决方案，该解决方案在所有浏览器中都非常强大，内置纯CSS。

我目前的代码如下：

<form method="post" action="{% url 'home_reply' pk=link.l %}">
    {% csrf_token %}
    {{ replyform.description }}<br>
    <button type="submit">Submit</button>
</form>

忽略{{}}语法 - 这是Django的模板语言。

Answer 1

我创造这样的东西的技巧是用容器包装

<div class="fancy-box-with-button">
  <input type="text"/>
  <button>Submit</button>
</div>

然后将所有<input>个样式移至.fancy-box-with-button，然后根据需要对<input>进行透明和其他修改。

按下按钮position: absolute并向右移动，将必要的padding-right添加到父元素，以防止不可见的输入重叠。

最有可能看起来像这样。

.fancy-box-with-button {
  background-color: white;
  border-radius: 4px;
  margin: 10px;
  display: block;
  position: relative;
  height: 30px;
  box-sizing: border-box;
  padding-right: 100px;
}

.fancy-box-with-button input {
  height: 100%;
  width: 100%;
  border: none;
  margin: 0;
  background-color: transparent;
}

.fancy-box-with-button button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  height: 100%;
  width: 100px;
  border: none;
  color: white;
  background-color: blue;
}

gulp-npm-script-sync

Answer 2

Jsfiddle Demo
您应该删除width: 1000px，因为它会使文本字段变宽，并使文本字段无响应。