マテリアライズの1つの行にアライメントするリストタグCSS

Question

リストはデフォルトでブロック要素です。以下のマテリアライズCSSコードは、2つのリストタワー（ロゴとホーム）を1つの行に整列させる理由は何ですか？

ナビゲーションバーのためにマテリアライズのドキュメントを見てみると

<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

私は以下のコードが見つかりました：あなたがあります見ることができ、最初のコードスニペットで

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

「をフロート：左は;」 2番目のコードには 'display：inline-block'があります。これは、リスト項目を同じ行に設定します。

あなたはフロートを削除し、私の下の例あたりの「ブロック」に表示を修正する必要があり、この停止するには：あなたのCSSのすべてを見ることなく

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

を、あなたは上の任意の「表示」プロパティを必要としないかもしれませんあなたのnav ul a、それは標準的なリスト属性です。