php - コンテナー内の入力の配置

Question

このような問題があります。コンテナーには、テキスト フィールドと送信ボタンの 2 つの入力があります。問題は、ロケールによってテキストが変更されると (たとえば、英語からフランス語に)、ボタンが引っ張られてテキスト フィールドに重なってしまうことです。以下に例を示します。

英語：

フランス語：

検索フィールドの長さがコンテナに自動的に収まるようにする方法はありますか?

このコンテナのコー​​ドは次のようになります。

  <div id="searchContainer">
    <input type="text" id="searchField" class="search" name="searchQ" />
    <?php echo $this->searchButton; ?>
  </div>

Answer 1

レイアウト用のテーブルを使用してもかまわない場合は、次のようにすることができます ( fiddle ):

<style>
.search-table {
    width:100%;
}
.search-table .search{
    box-sizing:border-box;
    width:100%;
}
.search-table .btn-cell {
    width:1px;
    white-space:nowrap;
}
</style>
<div id="searchContainer">
    <table class="search-table">
        <tr>
            <td><input type="text" id="searchField" class="search" name="searchQ" /></td>
            <td class="btn-cell"><button>search</button></td>
        </tr>
    </table>
</div>