8

横に「送信」ボタンがある非常に基本的な単一の入力フィールドがあります。検索ボタンの幅は 104 ピクセルに固定されています。両方とも、ブラウザーのビューポートの合計幅 50% で一緒にラップされます。ブラウザウィンドウの拡大に合わせて入力フィールドも拡大できるようにするのが私の計画です。

現時点では、特定のブラウザー ウィンドウで、入力フィールドの幅をラッパーの左から送信ボタンの左に広がるように修正する必要があります。ただし、ウィンドウのサイズを変更すると、(明らかに) それに応じて調整されないため、空白のギャップが残ります。

この質問に対する答えは、他のどこにも見つかりませんでした。通常、幅 100% で右パディングが 104px であれば、他のインライン要素でこの種の問題が解決されることは十分承知しています。ただし、ここでの問題は、ボタンがパディングの上にあるように見えず、代わりに新しい行に移動することです。

どうすればこれを解決できますか? ありがとう！

編集：これが私がこれまでに持っているものです。jsfiddle.net/nWCT8/ にアクセスしてください。ラッパー全体を中央に配置する必要があり、大多数のブラウザーをサポートする必要があります (ただし、IE6 で動作しなくてもかまいません)。このため、「calc」はあまり適していないと思います。

4

4 に答える 4

9

選択した答えは問題なく機能しますが、非常に複雑です。答えを書き直して、はるかに簡単にしました：

HTML:

<div class="halfWidth">
    <div class="input-wrapper">
        <input type="text" placeholder="Input text here"/>
    </div>
    <button type="submit">Search</button>
</div>

CSS:

.halfWidth {
    width:50%;
}
.input-wrapper {
    margin-right:100px;
}
input {
    float: left;
    width: 100%;
    -ms-box-sizing: border-box; /* ie8 */
    -khtml-box-sizing: border-box; /* konqueror */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    box-sizing: border-box; /* css3 rec */
}

例を見る:
http://jsfiddle.net/nWCT8/4/

于 2013-11-08T19:23:06.467 に答える
6

CSS3 をサポートする新しいブラウザーの場合は、次を使用できますcalc()。

width: calc(100% - 50px); // change 50px to width of button
于 2013-07-04T18:49:06.380 に答える
0

html:

<div>
    <input type="text" id="search" />
    <input type="button" value="Search" id="button" />
    <br class="clear: both;" />
</div>

CSS:

 * {
    padding: 0;
    margin: 0;

}

div {
    width: 70%;
    margin: 0 auto;    
    padding: 5px;
    background: grey;      
}

#search {
    width: calc(100% - 110px);        
    float: left; 
}

#button {
    width: 104px;
    float: left;    
}

jsfiddle

于 2013-07-04T18:49:07.567 に答える