html - 内联显示问题

Question

我正在创建一个带有下拉导航的网站，但在其中我的 div(显示内联的)没有显示内联。我不认为我做错了什么，但内联显示不工作。

它的要点是这段代码:

<h1 id="name">LFX Music</h1>
<div class="click-nav" style="display: inline;">
<ul class="no-js">
    <li>
        <a href="#" class="clicker">Profile</a>
        <ul>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Privacy</a>
            </li>
            <li>
                <a href="#">Help</a>
            </li>
            <li>
                <a href="#">Sign out</a>
            </li>
        </ul>
    </li>
</ul>
</div>
<div class="click-nav1" style="display: inline;">
<ul class="no-js1">
    <li>
        <a href="#" class="clicker1">Profile</a>
        <ul>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Privacy</a>
            </li>
            <li>
                <a href="#">Help</a>
            </li>
            <li>
                <a href="#">Sign out</a>
            </li>
        </ul>
    </li>
</ul>
</div>
<script src="scripts/js/navigation.js"></script>

不会并排显示两个 div

这是包含所有代码的 jsfiddle: JSFiddle

此外，有没有更好的方法可以使用 jQuery 处理菜单？

谢谢，您的帮助!

Answer 1

移除 display:inline 使用 float:left 或 display: inline-block

div {
    float:left;
}

或

div {
      display:inline-block;
}

如果您想了解 display:inline 和 display:inline-block 之间的区别，请查看 this 。

至于float:left，它几乎是不言自明的，但是 this 可以提供帮助。