0

我正在使用 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 标签有关，或者因为默认的纯布局是菜单标题下方的垂直菜单。有没有人设法将标题和列表放在同一行（例如，根据引导标题）？

4

1 回答 1

1

如果您希望lis 在一行中，彼此相邻，您可以使用浮点数：

.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>

于 2016-01-30T11:19:51.097 回答