行內塊和塊導航

我的導航有問題。我嘗試將導航元素居中並將其作爲塊。你能告訴我爲什麼李元素不是塊元素嗎？我不想僅在文本上點擊它。行內塊和塊導航

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

行內塊和塊導航

回答

相關問題