2017-08-08 55 views
1

我已經創建了一個輸入字段和一個按鈕,但我想將該按鈕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; 
} 

在小屏幕上其完美的罰款

enter image description here

但在大屏幕它是從出來輸入欄位

enter image description here

+0

我找到了一個類似的問題,也許這將幫助你: https://開頭計算器.com/questions/15314407 /如何添加按鈕的內部輸入 – VyoriX

+0

是的我試過這個,但沒有在我的情況下工作。 –

回答

3

使用此代碼

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> 
+0

謝謝兄弟它的工作:) 30分鐘後我會接受這個答案。 –

+0

歡迎傢伙... –

0

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>

試試這個好運氣

0

試試這個:

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

相關問題