删除无序列表和div之间的换行符

Question

我目前有一个导航栏，其中有几个项目在无序列表中向左浮动，以及一个向下浮动的div中的下拉按钮。目前，下拉菜单会移动到其他菜单项下方，如下所示：

我不想要这个间距;我希望div与ul中的项目对齐。我怎样才能做到这一点？

注意：我不能将div放在ul中，因为ul由外部数据源填充。这是我目前相关的css：

.overallContainer {
    display: inline;
}

.menuItems {
    float: left;
}

.dropdownButton {
    float: right;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

HTML：

<div class="overallContainer">
    <ul class="menuItems" id="menuItems" data-sly-list="${topnav.root.listChildren}"> 
        <li> 
            <a href="${item.path}.html">${item.title}</a> 
        </li>
    </ul>
    <div class="dropdownButton" data-sly-resource="*resource*"></div>
</div>

Answer 1

将ul和div置于新div内;然后在float: left;和嵌套display: inline-block;上使用ul或div。 （或者Flexbox，如果你愿意的话。）您需要在两个元素上设置width，因为默认情况下它们会有100%，这意味着它们不能很好地相互对齐。如果您希望文本完全对齐，您可能还需要考虑ul或div元素上的任何默认垂直边距，填充，线高。