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

Question

I have created a input field and a button but i want to put that button insiade that input field.我创建了一个输入字段和一个按钮，但我想将该按钮放在该输入字段中。 I have done it by using position:absolute but the problem is its not working properly in medium or large screen.我已经通过使用position:absolute完成了它，但问题是它在中或大屏幕中无法正常工作。 Any kind of help would be highly appreciated.任何形式的帮助将不胜感激。 Here is my code这是我的代码

HTML CODE代码

      <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 CODE 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;
}

In small screen its perfectly fine在小屏幕上它非常好

But in large screen it's coming out from the input field但在大屏幕上，它是从输入字段中出来的

Answer 1

use this code 使用此代码

css:- 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:- 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

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

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

try this good luck 试试这个好运

Answer 3

Try This: 尝试这个：

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

Answer 4

Update in 2022 :for this question can try this code: 2022年更新：对于这个问题可以试试这个代码：

 .search { margin-bottom: 30px; } form { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } input { position: relative; width: 280px; height: 30px; } button { position: absolute; margin-right: 3px; padding: 8px 10px; background-color: #e7c130; border: none; }

 <div className='search'> <form> <input type='text' /> <button>SEARCH</button> </form> </div>

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

问题描述

4 个解决方案

解决方案1
3 已采纳 2017-08-08 05:41:36

解决方案2
0 2017-08-08 05:47:26

解决方案3
0 2017-08-08 05:56:32

解决方案4
0 2022-07-19 13:51:04

Update in 2022 :for this question can try this code: 2022年更新：对于这个问题可以试试这个代码：

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

问题描述

4 个解决方案

解决方案1 3 已采纳 2017-08-08 05:41:36

解决方案2 0 2017-08-08 05:47:26

解决方案3 0 2017-08-08 05:56:32

解决方案4 0 2022-07-19 13:51:04

Update in 2022 :for this question can try this code: 2022年更新：对于这个问题可以试试这个代码：

解决方案1
3 已采纳 2017-08-08 05:41:36

解决方案2
0 2017-08-08 05:47:26

解决方案3
0 2017-08-08 05:56:32

解决方案4
0 2022-07-19 13:51:04