Question

请查看此图片：

从图像中可以看到我在输入框中输入了文本，但是因为我还在该框中放置了一个按钮，因此文本隐藏在框下方。

有没有办法防止这种情况，按钮也应该在那个地方，文字不应该隐藏，而是如果要输入更多的文字，它应该聚焦。

Html代码是：

<div class="form">
   <input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
   <button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>

css代码是：

@media only screen and (max-width: 768px)
{
input[type="text"]
    {
        font-family: "titillium_webregular", Arial, sans-serif;
        border: none;
        -webkit-border-radius: 3px 33px 33px 3px;
        border-radius: 10px 33px 33px 10px;
        color: rgba(85, 85, 85, 0.85);
        font-size: 1.1em;
        display: inline;
        padding: 19.7px 13px;
        background: #f5f5f5;
        outline: none;
        width: 93%;
        box-shadow: 0px 11px 34px #111;
        vertical-align: middle;
    }

.btn-1
    {
        cursor: pointer;
        padding: 29px 29px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        margin-left: -67px;
        text-indent: -9999px;
        margin-top: 1px;
        outline: none;
        width: 20px;
        height: 14px;
        border:none;
    }
}

任何帮助表示赞赏。提前谢谢。

Answer 1

试试这个..您可以在文本框右侧看到一个空格。我已经在文本框中添加了填充

$(function(){
  $('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});

#tbcss
   {
    padding-right: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>

Answer 2

如果您希望阻止图像隐藏文本，那么您需要做的就是增加输入文本字段的padding-right属性。

也许尝试使用40px甚至更多的值，直到您对结果满意为止，然后插入符不应该低于按钮。

Answer 3

只需添加：

input[type="text"]
{
    padding-right:5%;
}

Answer 4

在我看来，你应该以不同的方式使用你的样式，并使用.form CSS选择器。您可以使用flexbox例如：

.form {
  // NEW:
  display: flex;
  justify-content: space-between;
  // Your old input CSS:
  -webkit-border-radius: 3px 33px 33px 3px;
  border-radius: 10px 33px 33px 10px;
  background: #f5f5f5;
  box-shadow: 0px 11px 34px #111;
  width: 93%;
}

input[type="text"] {
  // NEW:
  width: 100%;
  // Your old without unnecessary CSS:
  font-family: "titillium_webregular", Arial, sans-serif;
  color: rgba(85, 85, 85, 0.85);
  border: none;
  font-size: 1.1em;
  padding: 19.7px 13px;
  outline: none;
  vertical-align: middle;
}

.btn-1 {
  // NEW
  align-self: flex-end;
  // Your old without unnecessary CSS:
  cursor: pointer;
  padding: 29px 29px;
  text-indent: -9999px;
  margin-top: 1px;
  outline: none;
  width: 20px;
  height: 14px;
  border:none;
}

添加webkit CSS属性，以防您在旧浏览器中需要支持。

Answer 5

在这种情况下，你需要做的就是添加“padding-right：50 px;”到输入文本框类（50只是一个数字，你可以根据需要增加或减少）

如何通过css防止文本重叠按钮

5 个答案: