javascript - CSS の無能 - 自分のページがこのようにレンダリングされる理由を理解できない

Question

はじめに、私は CSS に関してまったく無能です。しかし、私はチュートリアルを見たり読んだりしてきましたが、自分のページがこのようにレンダリングされる理由をまだ理解できません。ここにいる誰かにとって、これが迅速かつ明白になることを願っています。

ページを次のような形にしたい:

フィルター: CPM 所有者: [DROPDOWN] CP: [DROPDOWN] シリーズ: [DROPDOWN]

[選択を承認] [選択を却下]

[ここに表がありますが、質問とは関係ありません]

ただし、ページをロードすると次のようになります。

編集: フレックスボックス コンテナーを div ではなくスパンに変更したところ、ページは次のようになりました。

私が望まないあらゆる種類の改行があり、ドロップダウンの前に奇妙なスペースが置かれています。ページのこの部分を構成している CSS、JS、および HTML の関連部分を以下に示します。

HTML:

<div id="filters">
    <span id="filter_dropdowns_label" class="dropdowns_bar_label">
        Filter by:
    </span>
    <ul id="filter_dropdowns" class="dropdowns_bar">
        <!-- populated by changerequest.js -->
    </ul>
</div>
<ul id="buttons_top" class="buttons">
    <li><input type="button" value="Approve Selected" id="approve_button_top" class="approve_button" onclick="approveSelected()"/></li>
    <li><input type="button" value="Reject Selected" id="reject_button_top" class="reject_button" onclick="rejectSelected()"/></li> 
</ul>

CSS:

.dropdowns_bar {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.dropdowns_bar li {
    display: inline;
}

.buttons li {
    display: inline;
}

.hidden_column {
    display: none;
}

#filters {
     display: inline;
}

そしてJS：

// Create a dropdown
function createDropdown(id, label, data, defaultValue) {
    // initialize elements
    listEl = document.createElement('li');
    flexboxContainerEl = document.createElement('div');
    spanEl = document.createElement('span');

    // setup dropdown
    $(flexboxContainerEl).flexbox(data);
    $(flexboxContainerEl).attr('id', id);
    if (defaultValue != null) {
    $(flexboxContainerEl).setValue(defaultValue);    
    }

    // setup label
    $(spanEl).html(label + ':');

    // add to document
    $(listEl).append(spanEl);
    $(listEl).append(flexboxContainerEl);
    $('#filter_dropdowns').append(listEl);
}

// Creates and populates the filter dropdowns, selects default if present
function createDropdowns() {
    createDropdown('cpm_dropdown', 'CPM Owner', cpmList, cpmDefault);
    createDropdown('cp_dropdown', 'CP', cpList, cpDefault);
    createDropdown('series_dropdown', 'Series', seriesList, seriesDefault);
}

申し訳ありませんが、この質問は非常に「助けてください、コードが壊れています。修正してください。」CSS のチュートリアルやドキュメントをよく見ていて、自分の問題に似たものを見つけることができません。

---

編集: この回答に従って CSS を変更しました: https://stackoverflow.com/a/17417451/1532702

ページは次のようになります。

s を入れ替えてみました.appendが、ラベルの順序には何も影響しません。明らかに、それらは対応する各入力の前にある必要があります。

---

編集：その部分をリストではなくテーブルとして書き直すだけで問題を解決しました。すべてをはるかにシンプルにしました。