Question

我有一个电子邮件输入框，在输入末尾有“发送”按钮。我试图找到一种方法来阻止文本在发送按钮下方的较长输入上运行，并在其消失之前停止

这部分的代码是：

<form class="form" >
        <input type="email" class="form__field" placeholder="Your E-Mail Address" style="border-radius: 20px;"/>
        <button type="button" class="btn s btn--inside uppercase" style="top: 8px; color: black;">Send</button>
    </form>

-Picture of input box-

-Picture of problem-

对此的任何帮助都会对您有所帮助

https://jsfiddle.net/rgL6e45f/

我的问题

Answer 1

设置最大长度

<input type="email" maxlength="50" class="form__field" placeholder="Your E-Mail Address" style="border-radius: 20px;"/>

Answer 2

本质上，您需要在按钮后面引入填充，或将其放入不同的容器中。假设您的样式的按钮贴在框的右边缘，则可以执行以下操作：

.form__field {
  width: 275px; /* your width, minus the extra padding you give */
  padding-right: 96px; /* enough to offset px it hangs over input */
}

Answer 3

使用右填充并将其设置为足够高的值。请注意，使用i18n提交按钮值时，您需要寻找不同的解决方案（例如，父元素的样式与输入字段和提交按钮彼此相邻，输入字段占据剩余空间）。

停止输入框HTML上的文本溢出

3 个答案: