Pure.CSS 菜单标题和菜单列表在同一行

Question

我正在使用 Pure.css (purecss.io) 框架来布局网站。我在屏幕顶部使用水平菜单。我不知道如何将菜单项定位在与菜单标题相同的（第一）行。即在 HTML:

<div class="header">
    <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href="">My Website</a>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Log In</a></li>
        </ul>
    </div>
</div>

我使用的是标准 pure.css 文件，我怀疑问题与使用 ul 标记有关，或者因为默认纯布局是菜单标题下方的垂直菜单。有没有人设法将标题和列表放在同一行（例如，根据 bootstrap header）？

Answer 1

如果您希望 li 排成一行，并排在一起，您可以使用浮点数：

.pure-menu-list{ list-style: none; }
.pure-menu-list li{ float: left; }

所以：

.pure-menu-heading{ float: left; }
.pure-menu-list{ float: left;list-style: none; margin: 0; }
.pure-menu-list li{ float: left; margin-right: 10px; }

<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href="">My Website</a>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Log In</a></li>
        </ul>
    </div>

Pure.CSS 菜单标题和菜单列表在同一行

Pure.CSS menu heading and menu list on same row

html

css

twitter-bootstrap

yui-pure-css