入力フィールド内にボタンを追加する方法

入力フィールドとボタンを作成しましたが、そのボタンに入力フィールドを含める必要があります。私はposition:absoluteを使用してこれを行っていますが、問題は中または大画面で正しく動作しないことです。どんな種類の助けでも高く評価されます。ここに私のコード入力フィールド内にボタンを追加する方法

HTMLコードは

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

は

しかし、大画面でそれから出て来るその完全に罰金小さな画面では

 <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コードです入力フィールド

出典

2017-08-08 Aryan Shaw

を.com/questions/15314407/how-to-add-button-inside-input – 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

ありがとうBroそれは働いています:)私はこの答えを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

はこの試してみてください：ます。https：// stackoverflowの私は、同様の質問多分これはあなたを助けるを見つけた

<!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

入力フィールド内にボタンを追加する方法

答えて

関連する問題