时间戳

首页 > 解决方案 > HTML & CSS - 你如何显示

html - HTML & CSS - 你如何显示
    和
    在同一条线上（彼此相邻）？

问题描述

我有以下 HTML：

<div class="MenuContents">
    <ul class="dropdown-menu">
        <li><a id="index" href="index.html">Home</a></li>
        <li><a id="gamePage" href="gamePage.html">Game</a></li>
        <li><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
        <li class="float-right"><a id="about" href="about.html">About</a></li>
    </ul>
    <div class="dropdown">
        <button class="dropbtn">Game Design</button>
        <div class="dropdown-content">
            <a id="GameIdea" href="GameIdea.html">Link 1</a>
            <a id="GameMechanics" href="GameMechanics.html">Link 2</a>
            <a id="GameCharacters" href="GameCharacters.html">Link 3</a>
            <a id="Inspiration" href="Inspiration.html">Link 3</a>
        </div>
    </div>
</div>

我的横幅中有一个菜单项的无序列表，但是对于“游戏设计”选项，我希望它是一个下拉菜单，我的解决方案基本上导致这个“游戏设计”选项从无序列表中删除为列出项目并在原始无序列表之后成为自己的 div。

我的问题是：如何将此 div 放置在它曾经所属的无序列表中最后一个列表项旁边的同一行上，以便它看起来像一件事？

目前 div 位于无序列表的下方。

标签： htmlcss

解决方案

你可以试试这个：

CSS

ul.dropdown-menu, .dropdown{
  display: inline-block;
  vertical-align: top;
}

在这里演示

推荐阅读