中間の要素はボックスの幅と同じです。

Question

お元気ですか？

私は現在「アトミックデザイン」を学ぶことができるように、小さなプロジェクトに取り組んでいます。

問題が発生しました。

私はテーブルを持っています。

<table class="search-table"> 
        <tr> 
         <td colspan="2"> 
          <form class="search"> 
           <button class="icon-button enabled"><p class="default"><i class="fa fa-plus" aria-hidden="true"></i></p></button> 
           <input type="text" class="search enabled" placeholder="Suchen..."> 
           <input type="submit" class="button enabled default" value="Suchen"> 
          </form> 
         </td> 
        </tr> 
        <tr> 
         <th>Tabellenkopf (1)</th> 
         <th>Tabellenkopf (2)</th> 
        </tr> 
        <tr> 
         <td>Zeile (1)</td> 
         <td>Zeile (1)</td> 
        </tr> 
       </table> 

表の幅は100％に設定されていると私はinput type="text"は、残りのスペースが許す限り広いことにしたいです。 buttonとinput type="submit"の幅は固定されています。

は、私はすでに

input[type="text"] { 
    width: auto; 
    min-width: 0; 
    display: inline-block; 
    overflow: hidden; 
    } 

を設定し、 float:right input type="submit"にしようとしたが、 input type="text"は、常に次の「行」のボタンをプッシュしました。

何も動作していないようです。

Answer 1

フレックスボックスは、このような状況ではあなたの友人である、形成するためにdisplay:flex;を追加し、flex-grow:1入力テキストに

し、次の結果があります：あなたがすることもでき

.search-table { 
 
    width: 100%; 
 
} 
 

 
.search-table form{ 
 
    display:flex; 
 
    width:100%; 
 
} 
 

 
.search-table form input[type="text"]{ 
 
    flex-grow:1; 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<table class="search-table" border="1"> 
 
    <tr> 
 
    <td colspan="2"> 
 
     <form class="search"> 
 
     <button class="icon-button enabled"> 
 
      <i class="fa fa-plus" aria-hidden="true"></i> 
 
     </button> 
 
     <input type="text" class="search enabled" placeholder="Suchen..."> 
 
     <input type="submit" class="button enabled default" value="Suchen"> 
 
     </form> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <th>Tabellenkopf (1)</th> 
 
    <th>Tabellenkopf (2)</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Zeile (1)</td> 
 
    <td>Zeile (1)</td> 
 
    </tr> 
 
</table>

Answer 2

を計算を使用する

.search-table form input[type="text"]{ 
     width:calc(100% - 100px); 
    } 

100pxはボタンの幅で、入力タイプ= "submit"