如何使用纯 CSS 对齐导航链接和品牌名称？ 在品牌容器和链接容器上包含一个 float 后，它会不对齐。 Screenshot image here:
HTML
<!DOCTYPE html>
<hmtl>
<head>
<title>My Portfolio</title>
<meta name="author" content="Rocky">
<meta name="description" content="Sample Portfolio">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header class="header">
<nav class="nav-bar">
<section class="nav-container">
<section class="brand-container">
<h2 class="brand-name">Rocky</h2>
</section>
<ul class="link-container">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">About Me</a></li>
<li><a class="nav-link" href="#">My Works</a></li>
<li><a class="nav-link" href="#">My Challenge</a></li>
<li><a class="nav-link" href="#">Contact Me</a></li>
</ul>
</section>
</nav>
</header>
CSS
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
overflow-x: hidden;
}
a {
text-decoration: none;
}
.header {
height: 100vh; width: 100vw;
background: url('../img/header_img.jpg') top center / cover fixed no-repeat;
z-index: 1030;
}
.nav-bar {
position: fixed;
width: 100%;
border-bottom: 1px solid #EEE;
z-index: 1031;
}
.nav-container {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.brand-container {
float: left;
display: inline-block;
}
.brand-name {
position: relative;
padding: 5px 10px;
border-radius: 4px;
font-family: 'Poppins';
color: #444;
background: #EEE;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.link-container {
position: relative;
list-style-type: none;
float: right;
}
.link-container li {
padding: 20px 15px;
display: inline-block;
}
.link-container li a {
font-family: 'Poppins';
color: #EEE;
transition: color 150ms linear;
}
.link-container li a:hover {
color: #CCC;
}
如何解决这个问题以对齐它们？我尝试了一切，比如将它们分开，并使用了几个 CSS 属性来完成它没有用的工作。
最佳答案
所以 float 是将元素设置到右侧或左侧的一种非常“hacky”的解决方案，通常应尽可能避免使用。使用不同的显示设置应该能获得您想要的外观。
display: grid;
例如，将允许您将导航分成多个列，并将元素放置到您想要的任何列中。我做了一个codepen这显示了我认为您要明智地放置的外观。如果您有任何问题或任何问题，请随时提出!我希望这对您有所帮助!
关于html - float 后链接和品牌名称未对齐 - 纯 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53577230/