インラインブロックとブロックナビゲーション

私のナビゲーションに問題があります。私はナビゲーション要素を中心にして、それらをブロックとして作ろうとします。なぜli要素がブロック要素ではないのか教えてください。私はテキストだけでなく、それをクリックしたい。インラインブロックとブロックナビゲーション

html, body {margin: 0; padding: 0;} 

body { 
    background: black; 
    color: yellow; 
} 

.nav { 
    list-style: none; 
    text-align: center; 
    padding-bottom: 30px; 
    border-bottom: solid brown 1px; 
    font-size: 25px; 
} 

.nav li { 
    display: inline-block; 
    border: solid yellow 0.5px; 
    padding-right: 30px; 
} 

.nav a { 
    text-decoration: none; 
    color: yellow; 
}

とhtml：

<body> 
    <ul class="nav"> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about/">About</a></li> 
     <li><a href="/work/">Work</a></li> 
     <li><a href="/clients/">Clients</a></li> 
     <li><a href="/contact/">Contact</a></li> 
    </ul> 
</body>

私の英語のため申し訳ありません。

出典

2017-07-19 Karins

実行可能コードを追加する必要があります – albert

シンプルな答えは、このような李タグの外にあなたのAタグを置く：あなたのAタグの表示を行います<a href="/"><li>Home</li></a>

出典

2017-07-19 16:42:29 SkunkDog

これは意味がないと思います。技術的にはうまくいくかもしれませんが、私はそれに反対してアドバイスします。 –

html, body {margin: 0; padding: 0;} 
 

 
body { 
 
    background: black; 
 
    color: yellow; 
 
} 
 

 
.nav { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding-bottom: 30px; 
 
    border-bottom: solid brown 1px; 
 
    font-size: 25px; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    border: solid yellow 0.5px; 
 
} 
 

 
.nav a { 
 
    text-decoration: none; 
 
    color: yellow; 
 
    display: block; 
 
    padding-right: 30px; 
 
}

<body> 
 
    <ul class="nav"> 
 
     <li><a href="/">Home</a></li> 
 
     <li><a href="/about/">About</a></li> 
 
     <li><a href="/work/">Work</a></li> 
 
     <li><a href="/clients/">Clients</a></li> 
 
     <li><a href="/contact/">Contact</a></li> 
 
    </ul> 
 
</body>

：ブロックを。詰め物をliからaに移動させる

出典

2017-07-19 17:13:48

インラインブロックとブロックナビゲーション

答えて

関連する問題