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 可以提供帮助。

显示内联的问题

1 个答案: