Question

我的导航问题。我尝试将导航元素居中并将它们作为块。你能告诉我为什么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>

抱歉我的英文。

Answer 1

简单回答，将您的标签放在li标签之外，如下所示：<a href="/"><li>Home</li></a>

Answer 2

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移动到

内联块和块导航

2 个答案: