Question

HTML / CSS NOOB警告

您好，
我正在为实践目的重新设计this导航栏。目前，我的导航栏看起来像this。这是我的HTML代码：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Positioning | Home</title>
        <link rel="shortcut icon" href="Images/favicon.ico">
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

这是我的CSS代码：

body {
    margin: 0;
    padding: 0;
    background-color: #44accf;
}

header nav ul {
    margin: 0 20px;
    height: 50px;
    background-color: #b7d84b;
}

header nav li {
    height: 50px; 
    list-style-type: none;
    display: inline;
    border-right: 1px solid black;
}

header nav a {
    text-decoration: none;
    color: white;
}

我已尝试为各种元素，填充，边距等添加高度，但我无法弄清楚如何执行此操作。请帮忙！

Answer 1

出于本示例的目的，不需要使用嵌套的CSS选择器。 CSS is read from right to left。因此，嵌套是多余的，实际上可能会导致更多问题。

由于缺少CSS必须提供的垂直居中选项，因此创建这样的菜单可能有点棘手。因此，您在使用几次像素尺寸时会陷入困境，这些像素尺寸在您尝试几次后才会结束。

要使其正常工作，您需要在li标签中添加一些填充。锚标记始终是内联元素，因此在这些元素上设置填充只会使它们从左向右移动。

body {
    margin: 0;
    padding: 0;
    background-color: #44accf;
}

ul {
    margin: 0 20px;
    height: 50px;
    background-color: #b7d84b;
}

li {
    list-style-type: none;
    display: inline-block;
    border-right: 1px solid black;
    padding: 16px;
}

a {
    text-decoration: none;
    color: white;
}

这应该可以解决问题：https://jsfiddle.net/7bht51aL/6/

HTML＆amp; CSS导航栏间距

1 个答案: