Question

列表是默认的块元素。为什么下面的Materialize CSS代码将两个列表tahs（logo和home）排成一行？

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

在第一个代码段中，您可以看到其中有一个＆＃39; float：left;＆＃39;并且在第二个代码上剪断了一个＆＃39;显示：inline-block＆＃39;。这将列表项设置在同一行。

要停止此操作，您需要移除浮动并将显示屏修改为“阻止”＆＃39;根据我的下面的例子：

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，您可能不需要任何显示器＆＃39;导航ul a上的属性，因为它是标准列表属性。

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

1 个答案: