なぜ表示されないのですか？ "li a {"、 "li {" in CSS？

Question

最初のウェブサイト構築の一環としてメニューを作成する方法を学び、水平対垂直のチュートリアルを紹介しました。そのほとんどは、あなたのリストをCSSの "ブロック"または "インライン"として定義することになります。これは私にとって理にかなっていますが、なぜそうではないのですか？

li a { 
    display:inline; 
} 

は水平メニューを作成しません。しかし、やって

li { 
    display:inline; 
} 

は、その水平メニューを作成します。私はそれが "li a"対 "li"要素に関する何かと関係していると推測しています。参照のために私はすべてのリスト項目をリンク要素として持っています。コード：

HTML - 垂直のための

<ul> 
<li><a href="default.asp">Home</a></li> 
<li><a href="news.asp">News</a></li> 
<li><a href="contact.asp">Contact</a></li> 
<li><a href="about.asp">About</a></li> 
</ul> 

とCSS -

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    background-color: #f1f1f1; 
} 

li a { 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

Answer 1

li要素がデフォルトdisplay: list-itemです。 a要素の既定値はdisplay: inlineです。したがって、親を変更しないでaの表示を変更することは何もしません。あなたのアンダーシャツだけを変更したときにあなたがあなたのシャツを交換したことに誰かが気づくのが好きなようなものです。インラインリストの場合は、liをインラインにする必要があります。 aブロックをブロックにすることはオプションです。つまり、埋め込みやマージン、およびインライン要素では変更できないその他のプロパティを混乱させることができます。

https://jsfiddle.net/ybkkgpoe/