-1

テキストフィールドとボタンしかないフォームがあります。それらは同じ行にあり、最初に texttfield があり、次に右側にボタンがあります。問題は、ボタンのキャプションに基づいてボタンが展開され、テキストフィールドが残りの場所を埋める必要があるということです。これを達成するために、私は次のようなものを使用しました：

<html>
    <head>
        <style>
        #search_form {
        width:500px;
        }
        #search_button_container {
        float: right;
        }

        #search_field_container {
        overflow: hidden;
        }

        #search_field {
        width:92%;
        }

        </style>
    </head>
    <body>
        <form id="search_form">
        <div>
        <div id="search_button_container">
        <input type="submit" value="Search" id="search_submit" />
        </div>

        <div id="search_field_container">
        <input id="search_field" name="search_field" type="search" />                                       
        </div>                                  
       </div>                                                          
        </form>
    </body>
</html>

このマークアップでは、ボタンが最初の項目ですが、ページの float=right により右側に配置されています。これは私が望むものですが、これにより tabindex の順序が乱れます。タブを押すと、最初にボタンがフォーカスされ、次にテキストフィールドになりますが、テキストフィールドが最初になる必要があります。

注: tabindex=1 を textfield に追加し、tabindex=2 をボタンに追加することはできません。これは、この検索フォームの上下に他の要素があり、tabindex を上から下に移動する必要があるためです。

要素を希望どおりに配置したり、タブインデックスを並べ替えたりする別の方法はありますか。私の場合の最善の解決策は、別のスタイリングを使用して目的の結果を達成することですが、その方法がわかりません。

4

2 に答える 2

1

CSS テーブルは HTML テーブルと同じアルゴリズムを使用しますが、意味的には関係ありません。視覚的に同じようにレンダリングされるだけです。

次に、結合された 2 つのセルを 100% 幅にして、互いの長さに適応する各セルのコンテンツを保持できます。送信ボタンが長いほど、検索入力は短くなります。

これを示すフィドルがあります: http://jsfiddle.net/4JvRV/1/
Chrome で動作しない場合はお知らせください。
互換性: IE7 の IE8+
フォールバック: IE7 と IE6 では、短い検索結果が表示されます... エラー テキスト入力、完全に許容される IMHO。または、幅を 100% にして、必要に応じて 2 行で表示することもできます。

于 2012-04-16T22:21:44.727 に答える
0

テキスト フィールドの後にボタンを配置し、テキスト フィールドを左にフロートさせます。

于 2012-04-16T21:34:30.763 に答える