5

右側に送信ボタンがある流動的なテキスト入力を作成しようとしています。入力とボタンは、そのコンテナの100％を満たす必要があります。

これが私が達成しようとしていることの概算です：http：//jsfiddle.net/t7tgJ/

私が直面している問題は、入力をそのコンテナに満たすために、100％のような流動的な幅を与える必要があるということです。ただし、ボタンを右に浮かせた場合、ボタンが収まるように、その幅を90％程度に下げる必要があります。ただし、これは1つのビューポートサイズでのみ機能します。

私が欲しいのは

input { width: 100% - {button.width}; }
button { float: right; }

または、平易な英語では、入力は右に浮かぶボタンまで拡張し、任意のビューポートサイズでそのままにしておく必要があります。

4

7 に答える 7

5

あなたの問題には2つの解決策があると思います。

1） display: flexコンテナ要素と flex-grow: 1入力で使用できます。これがコーデックスです

2）この投稿のoverflow: hiddenトリックを使用できます。ただし、フィールドで追加のラッパーを使用する必要があります。input

于 2014-12-01T09:50:18.467 に答える
2

このようなもの？フィドル固定サイズのボタンで動作するようです:-)ポイントは、入力のラッパーにマージンを追加してボタン用のスペースを作ることです...

于 2012-04-12T14:57:08.303 に答える
2

それらはすべて良いアイデアを表現していましたが、ブラウザー間で一貫しているように見えるさまざまな提案を得るのに苦労していました。これを何度も繰り返した後、IE7を超えるすべてのものに適し、追加のコンテナーを必要としない次のソリューションを思いつきました。

http://jsfiddle.net/tjlahr/hUeZS/

基本的に私にとっての解決策は次のとおりです。

1）button { float: right; position: relative; top: -28px; }

2）ブラウザのリセットを使用して、ボタン要素に追加される余分なパディングとマージンの一部をキャンセルします。

3）入力とボタンの高さを設定して、ブラウザ間でサイズをさらに一定に保ちます。

于 2012-04-13T10:59:31.353 に答える
1

これを見つけて、それは私にとって素晴らしい働きをしました。JSFiddle

  1. float: rightボタンに
  2. フィールドを与えて、width: 100%それをdivでラップしますoverflow: hidden

HTML

<a href="#" class="search-btn">Search</a>
<div class="search-field-wrap">
  <input class="search-input" type="text" name="search">
</div>

CSS

.search-btn {
    float: right;
}
.search-field-wrap {
    overflow: hidden;
}
.search-input {
    width: 100%;
}
于 2014-10-10T14:52:20.510 に答える
1

わずかな変更で適応トーマスフィドル

http://jsfiddle.net/hUeZS/147/

top：-28pxを使用する代わりに、margin-top：-28pxを試してください。私の場合、その下の要素はまだ全幅を取得し、影響を受けないため、これはより良い方法です。

...

form button {
    /* style */
    background-color: lightblue;
    border: none;
    padding: 7px;

    /* to match input height above */
    height: 28px;

    /* removes the box from DOM */
    float: right;

    /* alternative to negative margin-top,
    which seems to hide my button behind the input */
    position: relative;
    top: 0px;
    margin-top: -28px;
}

...
于 2017-03-03T02:04:39.300 に答える
0

ボタンに負の上部マージンを適用します：http：//jsfiddle.net/t7tgJ/2/

アップデート：

ボタン幅が固定された新しい条件でこれを実現するには、入力を左に、ボタンを右にフロートさせます。ただし、フォーム要素の高さはすべてのフロートされた子で折りたたまれるため、フォーム要素にclearfixを適用する必要があります：http：//jsfiddle.net/t7tgJ/3/

于 2012-04-12T14:59:49.317 に答える
0

display: flex;float
フレックスレイアウトによる解決を参照せずに多くの問題を解決できますhttp://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/

于 2014-12-01T19:09:50.287 に答える