0

首先，我对 CSS 完全无能。但是，我一直在观看/阅读教程，但仍然无法弄清楚为什么我的页面会呈现这种方式。我希望这对这里的人来说是快速而明显的。

我希望页面的形状如下：

筛选条件：CPM 所有者：[DROPDOWN] CP：[DROPDOWN] 系列：[DROPDOWN]

[批准选定] [拒绝选定]

[这里有一张桌子，但与问题无关]

但是，当我加载页面时，它看起来像这样：

在此处输入图像描述

编辑：我将 flexbox 容器更改为 span 而不是 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

页面现在看起来像：

在此处输入图像描述

我试过交换.appends，但没有任何影响标签上的顺序。显然，它们应该位于每个相应输入的前面。

编辑：我通过将该部分重写为表格而不是列表来解决我的问题。让一切变得简单多了。

4

1 回答 1

0

编辑：好的，我认为更好的答案。尝试这个：

.dropdowns_bar li {
    display: inline-block;
}

.buttons {
    display:block;
    margin-top:10px;
}

.buttons li {
    display: inline-block;
}
于 2013-07-02T04:33:48.657 回答