17

以下の例では: ここに画像の説明を入力

テキストボックスで利用可能なすべてのスペースを埋めたい。問題は、要素が静的ではないため、ドロップダウンの幅を固定できないことです。これをcssだけで解決したいと思います（可能であればjavascriptはありません）。

同様の質問に対して提案された解決策を試してみましたが、運がありません:(

これがフィドルです：http://jsfiddle.net/ruben_diaz/cAHb8/

html は次のとおりです。 

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">General</option>
                <option value="2">Fruits</option>
                <option value="3">Ice Creams</option>
                <option value="4">Candy</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>

そしてここにcss：

#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-block;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}
4

3 に答える 3

8

比較的最近の 'flex' 表示 css プロパティは、この問題を解決します:

あなたがする必要があるのは、フォームdisplayをに変更するだけですinline-flex、 与える.resizable_text_box flex-grow: 100;そして 与える#question_text_box width: 100%

OPからの完全な例:

<style>
#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-flex;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
    flex-grow: 100;
}
#question_text_box {
    width: 100%   
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}
</style>

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">Options</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>

Flex-box を使用すると、CSS で 15 年間やりたかったことを実行できます - ついに登場しました! 詳細: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2015-05-28T02:49:14.223 に答える
2

<span>これらの要素の一部を要素に変更し<div>ます。次にfloat:left、ドロップダウンの周りの分割。次に、右側の an の 1 つとそのoverflow:hidden中の入力要素 a を指定しwidth:100%;ます。

ここに例があります。ここでもドロップダウンが大きくなっています。

それ以外は、送信ボタンを台無しにします。したがって、#form_wrapper静的でない配置 ( position:relative) を指定し、送信ボタンを絶対に配置します。this fiddleとthis oneを参照してください。

于 2013-04-26T16:39:36.730 に答える