Question

我在html中有这个导航栏：

<div class="navbar">
            <p class ="logo">Vris</p>
            <ul class="navitems">
                <li><a href="#">Home</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">My work</a></li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </header>

以下css随之而来：

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.navbar {
    background: #181818;
    height: 3.5em;
    line-height: 1em;
}

.navitems {
    float: right;
    margin-right: 3em;
}

.logo {
    float: left;
    font-size: 1.3em;
    color: white;
}

li {
    font-family: 'Montserrat';
    font-size: 1.3em;
    text-decoration: none;
    list-style-type: none;
    padding-right: 2em;
    float: left;
}

.navbar a {
    text-decoration: none;
    color: white;

}

但导航栏中的UL和

元素不会占用相同的行高。为什么？我在父导航栏类中设置了行高，所以

和子项应该继承它，对吗？

Answer 1

如果要垂直居中，则需要使用与高度相同的线高。

＆＃13;

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.navbar {
    background: #181818;
    height: 3.5em;
    line-height: 3.5em;
}

.navitems {
    float: right;
    margin-right: 3em;
}

.logo {
    float: left;
    font-size: 1.3em;
    color: white;
}

li {
    font-family: 'Montserrat';
    font-size: 1.3em;
    text-decoration: none;
    list-style-type: none;
    padding-right: 2em;
    float: left;
}

.navbar a {
    text-decoration: none;
    color: white;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar">
            <p class ="logo">Vris</p>
            <ul class="navitems">
                <li><a href="#">Home</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">My work</a></li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </header>
</body>
</html>

＆＃13;

Answer 2

line-height是那些没有嵌套的奇怪事物之一......将line-height放在li上。

这是一个codepen：https://codepen.io/justicart/pen/goJdBx

导航栏元素不会占用相同的行高

2 个答案: