html - 入力フィールドと送信ボタンが含まれている要素に収まらない

Question

検索バーの横に「検索」ボタンを配置しながら、流動的な入力フィールド幅を持たせようとしています。

入力フィールド.searchは.navigation-rightと呼ばれる包含要素よりもはるかに大きく、ボタン.search-submitが包含 div から押し出されているようです。以下の画像を参照してください。

問題：

私はそれを次のように見せようとしています：

これが私のコードです:(便宜上、マージンとパディングの値を省略しました)

CSS

.navigation-right {
    width: 282px; min-width: 282px;
    height: 50px;

    display: table-cell;
    vertical-align: top;

    border: 1px solid #920000;
}

.search {
    width: 100%;
    height: 30px;

    display: table;
}

.search-input {
    height: 28px;
    width: 100%;

    display: table-cell;

    border: 1px solid #920000;
    outline: 0px;
}

.search-submit {
    width: 30px;
    height: 30px;

    display: table-cell;
    vertical-align: top;

    margin: 0;
    padding: 0;

    border: 0;
}

HTML

<div class="navigation-right">

    <form class="search">

        <input class="search-input">

        <button class="search-submit"></button>

    </form>

</div>

Answer 1

以下のクラスを置き換えます

.search-input {
    height: 28px;
    width: 70%;

    display: table-cell;

    border: 1px solid #920000;
    outline: 0px;
}

Answer 2

検索フィールド (.search-input) の幅が 100% に設定されているため、親がいっぱいになります。幅を約250pxに縮小する必要があります

Answer 3

.search-input {
    height: 28px;
    width: 70%;

    display: table-cell;

    border: 1px solid #920000;
    outline: 0px;
    float:left;
}

.search-submit {
    width: 30px;
    height: 30px;

    display: table-cell;
    vertical-align: top;

    margin: 0;
    padding: 0;

    border: 0;
    float:left;
}

Answer 4

.search-input {
    height: 28px;
    width: 100%;
      display: table-cell;
    border: 1px solid #920000;
    outline: 0px;
    position:relative;
float:left;
}

.search-submit {
    width: 30px;
    height: 30px;
    display: table-cell;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 0;
    position:absolute;
    float:left;

}