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

Answer 1

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

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

所以：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: