0

現在、ドロップダウンをアクティブにするリンクの幅によって幅が制限されているドロップダウン フォームがあります。

問題

すべてのフォーム要素を 1 行に配置するために、フォームを必要なだけ拡張したいと考えています。どうやってやるの？

現在の HTML コード:

<h1>Time Period:
    <div id="date-filter-dropdown" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <span class="primary">May 2013</span></a>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <form class="form-inline">
                        <input type="text" class="input-mini filter-time-form" id="id_filter_form_year" maxlength="4" size="4" placeholder="YYYY" />
                        <span class="filter-form-date-dividers">&dash;</span>
                        <input type="text" class="input-mini filter-time-form" id="id_filter_form_month" maxlength="2" size="2" placeholder="MM" />
                        <span class="filter-form-date-dividers">&dash;</span>
                            <input type="text" class="input-mini filter-time-form" id="id_filter_form_day" maxlength="2" size="2" placeholder="DD" />

                        <button type="button" class="btn btn-primary javascript-submit" id="filter-date-submit" onclick="filter_time();">Filter</button>
                    </form>
                </li>
            </ul>
        </div>
    </h1>

JSFiddle

また、何らかの理由でフォームをクリックすると、すぐに消えてしまいます。これは、私が作業していた実際の Web ページでは発生せず、JSFiddle ページでのみ発生します。今のところ、タブを押してこの問題を回避しました。

4

2 に答える 2

1 
h1 div#date-filter-dropdown ul.dropdown-menu {
    white-space:nowrap;
    min-width: 10px;
}
于 2013-05-12T22:23:25.923 に答える