html - 在 Materialise CSS 中列出在一行上对齐的标签

Question

列表默认是 block 元素。为什么下面的 Materialise CSS 代码将两个列表标签( Logo 和主页)对齐在一行中？

<ul class="side-nav" id="mobile-menu">

       <li class="logo">
         <a id="logo-container" href="#!" class="brand-logo">
           <object id="front-page-logo" type="image/svg+xml" data="images/materialize.svg">
               Your browser does not support SVG
           </object>
         </a>
       </li>

       <li><a href="#!">Home</a></li>
</ul>

Answer 1

查看导航栏的 Materialise 文档，我发现了以下代码:

nav ul li {
    transition: background-color .3s;
    float: left;
    padding: 0;
}

nav ul a {
    transition: background-color .3s;
    font-size: 1rem;
    color: #fff;
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
}

在第一个代码片段中，您可以看到有一个“float: left;”在截断的第二个代码中有一个“显示:内联 block ”。它将列表项设置到同一行。

要停止这种情况，您需要移除 float 并将显示修改为“阻止”，如下面的示例所示:

nav ul li {
    transition: background-color .3s;
    padding: 0;
}

nav ul a {
    transition: background-color .3s;
    font-size: 1rem;
    color: #fff;
    display: block;
    padding: 0 15px;
    cursor: pointer;
}

在没有看到所有 CSS 的情况下，您可能不需要在导航栏上添加任何“显示”属性，因为它是标准列表属性。