入力ボックスが％100の場合、ボタンがdiv内にプッシュされます。

div内の残りの幅を埋めるように入力テキストボックスを要求すると、私のボタンがdiv内にプッシュされているようです。私のdivの残りの幅を埋めるために入力を使用しようとしている間に、私の入力の横にボタンをきれいにする方法はありますか？入力ボックスが％100の場合、ボタンがdiv内にプッシュされます。

私は（右）上の問題の迅速なPIC（左）および所望の結果を添付しています。ここ

は、HTMLマークアップです：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body> 
 
    <div style="border: 1px solid red; width: 200px;"> 
 
     <input type="text" style="box-sizing: border-box; width: 100%; border: 0;"><input type="button" value="x"/> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-03-22 BobbyJones

の作品レスあなたのやっていることではありません。 '100％'は "休憩"を意味するものではなく、100％を意味します。 // Flexboxはこのようなものを美しく解決します。 – CBroe

これを修正する方法はたくさんあります。しかし、一つの方法はフレックスボックスです。外側のdivにdisplay: flex;を追加します。

<div style="border: 1px solid red; width: 200px; display: flex;"> 
 
     <input type="text" style="box-sizing: border-box; width: 100%; border: 0;"><input type="button" value="x"> 
 
    </div>

JSFiddle

出典

2016-03-22 15:57:25

私が埋めるために入力されたテキストボックスを尋ねると、」それは非常に柔軟ではないが、それは_

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body> 
 
    <div style="border: 1px solid red; width: 200px;"> 
 
     <input type="text" style="box-sizing: border-box; width: 175px; border: 0;"><input type="button" value="x" style="width:25px"/> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-03-22 16:00:11 ellirdnaw

入力ボックスが％100の場合、ボタンがdiv内にプッシュされます。

答えて

関連する問題