0

ばかげている可能性のある質問についてギャルとみんな申し訳ありませんが、私はこの問題を解決するためのさまざまな方法を探していましたが、それでも私が望むようには機能しません。

これは、入力フィールドが非常に広い（ワイドモニターの〜1300 pxなど）にもかかわらず、入力フィールドが非常に短い（〜150pxなど）ままである場合のこれらの問題の1つです。

私はもともとhtmlとCSSを次のように表示していました：http： //jsfiddle.net/jjoensuu/qSz5x/5/

この問題を解決するために、私は次の場所で解決策を見つけました： 親ブロック内の残りのすべての幅を占めるようにテキスト入力ボックスを作成するにはどうすればよいですか？

上記のスレッドで「wdm」の答えに似ていると思うものを作成しましたが、結果がまだ狭い入力フィールドであるため、何かが欠けています。私の作成はここにあります：http： //jsfiddle.net/jjoensuu/rJ45P/8/

同じスレッドで「MartyWallace」のソリューションも試しましたが、機能しませんでした。

したがって、jsfiddleサイトの私のコードへの参照として、「topsearch」ボックスの幅は約1300ピクセルになりますが、「field-topsearch」入力フィールドは約156ピクセルのままです。

私が試みた解決策のいくつかでは、「実行」ボタンが次の行に折り返されます。これを解決する方法についての助けをいただければ幸いです。

4

2 に答える 2

1

ここに作業フィデルがあります：http://jsfiddle.net/surendraVsingh/rJ45P/18/

CSS

.topsearch
    {
    height: 40px;
    line-height: 35px;
    padding-right: 10px;
    width:100%;
    display:table;
    }

.topsearch label
    {
    color: #c98116;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.9em;
    margin: 0 5px;
    }

.topsearch label, .topsearch form
    {
    display: inline;
    } 

.topsearchfield
    {
    border: none;
    height: 24px;
    font-size: 15px;
    width: auto;
    } 
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
    {
    display: table-cell;
    }

</p>

于 2012-07-30T06:59:34.300 に答える
1

私は少し違うアプローチを取りました。入力テキストフィールドを拡張したいが、ラベルと入力ボタンは入力フィールドの両側で同じサイズのままにしたいようです。これは、テーブル レイアウトに頼らずに複数の行を含むフォームを生成するのに役立ちます。また、前の提案は、要素を 1 行に保持することに関して、実際にはうまく機能しません。この手法を使用すると、含まれている「ボックス」を好きなようにサイズ変更できます。

HTML を少し調整する必要がありましたが、関連する要素の横にラベルを配置する必要があると思います。また、レイアウトの一部ではないため、わかりやすくするためにフォーム html も省略しています。

<div class="input">
    <label for="field-topsearch">Search</label>
    <div class="value">
        <div>
            <input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
        </div>
        <input type="submit" class="button-start-search submit " value="Go!"/>
    </div>
</div>

そしてCSS：

.value {
    position: relative;
}
.value>div {
    margin-left: 60px;
    margin-right: 40px;
}
label {
    position: absolute;
    top: 0px;
    left: 0px;
}
input.submit {
    position: absolute;
    top: 0px;
    right: 0px;
}
input[type="text"] {
    width: 100%;
}

フィドルはここで入手できます

于 2013-09-27T13:55:59.117 に答える