在Materialise CSS中對齊一行上的列表標籤

Question

列表默認情況下是塊元素。爲什麼下面的Materialise CSS代碼將兩個列表tahs（徽標和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; 
} 

在第一個代碼段，你可以看到有一個「浮動：左;」並在第二個代碼剪切了一個'display：inline-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」屬性您的導航欄，因爲它是一個標準的列表屬性。