Question

前言，我完全不熟悉CSS。但是，我一直在观看/阅读教程，但仍然无法弄清楚为什么我的页面会呈现它的样子。我希望这对于这里的人来说是快速而明显的。

我希望页面形状像这样：

筛选依据：CPM所有者：[DROPDOWN] CP：[DROPDOWN]系列：[DROPDOWN]

[APPROVE SELECTED] [REJECT SELECTED]

[此处有一张表，但与问题无关]

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

enter image description here

编辑：我将flexbox容器更改为span而不是div，现在页面看起来像：

enter image description here

我不想要各种新行，并且在下拉列表之前放置了奇怪的间距。以下是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

现在页面如下：

enter image description here

我尝试过交换.append，但没有任何因素影响标签上的订单。显然，它们应该位于每个相应的输入之前。

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

Answer 1

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

.dropdowns_bar li {
    display: inline-block;
}

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

.buttons li {
    display: inline-block;
}

CSS无能 - 无法弄清楚为什么我的页面呈现的方式

1 个答案: