我正在创建一个导航栏。我想让底部边框线出现在导航栏的底部，像这样:
但是我从我的代码中得到的是这样的:
我的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>batman</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<a href="#" class="logo">
<img src="./img/bat_logo.png" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li><a href="#villains"> Villains </a></li>
<li><a href="#identity"> Identity </a></li>
<li><a href="#movies"> Movies </a></li>
</ul>
</nav>
</div>
</body>
</html>
我的 CSS:
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
}
最佳答案
使用 flex与 justify-content: space-between在 parent 身上，你也可以使用 align-items垂直对齐的东西。也改了<div id="header">至 <header id="header"> ，因为它似乎是一个语义上更合适的元素。
img {
max-width: 50px;
}
.logo {
height: 50px;
display: block;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display: flex;
justify-content: space-between;
align-items: center;
}
nav li {
display: inline-block;
}<header id="header">
<a href="#" class="logo">
<img src="https://images.coplusk.net/projects/19697/steps/33014/normal_big_cartoon_batman_symbol_1250787261.jpg" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li><a href="#villains"> Villains </a></li>
<li><a href="#identity"> Identity </a></li>
<li><a href="#movies"> Movies </a></li>
</ul>
</nav>
</header>关于html - border-bottom 没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44474878/