如何在输入字段内添加一个按钮

我已经创建了一个输入字段和一个按钮，但我想将该按钮insiade输入字段。我通过使用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; 
}

在小屏幕上其完美的罚款

但在大屏幕它是从出来输入栏位

来源

2017-08-08 Aryan Shaw

我找到了一个类似的问题，也许这将帮助你： https：//开头计算器.com/questions/15314407 /如何添加按钮的内部输入 – VyoriX

是的我试过这个，但没有在我的情况下工作。 –

使用此代码

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>

来源

2017-08-08 05:41:36

谢谢兄弟它的工作:) 30分钟后我会接受这个答案。 –

欢迎家伙... –

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>

试试这个好运气

来源

2017-08-08 05:47:26 Jok3r

试试这个：

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

来源

2017-08-08 05:56:32

如何在输入字段内添加一个按钮

回答

相关问题