Question

我已经创建了一个输入字段和一个按钮，但是我想把那个按钮放在那个输入字段之外。我使用position:absolute完成了它，但问题是它在中型或大型屏幕上无法正常工作。任何形式的帮助将受到高度赞赏。这是我的代码

HTML代码

      <div>
          <div style="float: left;width: 82%">
                <input type="text" class="sent-message-text">

                <img src="../img/camera.png" class="post-image-uploaad">

          </div>
          <div style="float: right">
            <button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad" style="margin-right: 15px;"></button>
          </div>
      </div>
</div>

CSS代码

.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
    margin:-20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border: 1px solid #1486ab66 !important;
border-radius: 4px;
    width: 92%;
}

.post-image-uploaad {
    width: auto;
height: 22px;
margin-top: 8px;

}

.no-button-design {
    padding: 0px;
border: 0px;
background-color: transparent;
margin: 0px;

}

.no-button-design img {
    height: 34px;
}

在小屏幕上它非常精致

但是在大屏幕中，它会从输入字段输出

Answer 1

使用此代码

<强> CSS： -

.fixed-bottom2 {
    box-shadow: inset 0px 4px 5px #ededed;
    padding: 9px;
    margin: -20px !important
}

.sent-message-text {
        border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border-radius: 4px;
width: 100%;
position: relative;
}

.post-image-uploaad {
  position: relative;
width: auto;
height: 22px;
margin: -39px -3px 1px 1px;
float: right;
}

.no-button-design {
       padding: 0px;
border: 0px;
background-color: transparent;
margin: 19px 35px;
}

.no-button-design img {
    height: 34px;
}

<强> HTML： -

<div>
    <div style="float: left;width: 82%">
        <input type="text" class="sent-message-text">
        <img src="../img/camera.png" class="post-image-uploaad">
    </div>
    <div>
        <button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad_send" style="margin-right: 15px;"></button>
    </div>
</div>
</div>

Answer 2

＆＃13;

form {
  display: inline-block;
  position: relative;
}

form button {
  position: absolute;
  top: 0;
  right: 0;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>

<form action="/action_page.php">
  <input name="search" type="text">
  <button type="submit">click</button>
</form>

</body>
</html>

＆＃13;

试试这个好运

Answer 3

试试这个：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
<body>
<input type="text"/><button class="btn">button</button>
</body>
</html>

＆＃13;

如何在输入字段中添加按钮

3 个答案: