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

Question

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

<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;'，在第二个代码片段中有一个 'display: inline-block'。它将列表项设置到同一行。

要停止此操作，您需要移除浮动并将显示修改为 'block'（根据我的以下示例）：

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，您可能不需要任何 'display' 属性在您的导航栏上，因为它是标准列表属性。

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

List tags aligning on one row in Materialize CSS

html

css

materialize