我正在制作一个网站，左侧有徽标和"主页"按钮，右侧有"产品"关于我们"联系我们"，主页与徽标底部对齐，而不是导航顶部。当我写"nav a{ position： absolute"时，它会影响所有导航属性，但它解决了主页和徽标对齐问题。但是，如果我为主页按钮制作一个div，使其仅针对该属性，则它不起作用。
这是我的代码，用于解决问题但创建了另一个问题：
nav a {
text-decoration: none;
color: black;
align-items: center;
overflow: hidden;
padding-left: 20px;
/* =========================== this is where it fixes
the problem but creates another one =======*/
position: absolute;
}
nav {
background-color: #ffffff;
height: 75px;
}
nav li {
list-style: none;
position: relative;
text-decoration: none;
padding: 2%;
align-items: center;
overflow: hidden;
float: right;
display: inline;
}
nav img {
margin-top: .8%;
margin-left: 2%;
height: 50px;
width: auto;
position: relative;
}
<nav>
<img src="bowtie.png" href="index.html">
<span><a href="index.html" class="homenav">Home</a></span>
<li><a href="#contact">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="photos.html">Products</a></li>
</nav>
修复了问题，但创建了另一个问题
问题未修复(主页与徽标底部对齐(
这有一些问题。对于初学者来说，你需要在ul中使用li。另外，浮动：右;从文档流中删除导致某些对齐问题的元素。最后显示：内联在您的"nav li"上折叠元素并隐藏文本。我已经在下面粘贴了修改后的版本。我使用 position：absolute 将菜单绝对定位到右上角(右：0，顶部：0(和左上角(顶部：0，左侧：0(。
最后，为了固定家的对齐方式，我在ul和li上增加了一个高度。
<style>
nav a {
text-decoration: none;
color: black;
overflow: hidden;
padding-left: 20px;
}
nav {
background-color: #ffffff;
height: 75px;
}
ul{
margin-top:0;
height:50px;
}
.right-menu {
position:absolute;
right:0;
top:0;
width:400px;
}
.left-menu {
position:absolute;
left:0;
top:0;
width:300px;
}
nav li {
list-style: none;
text-decoration: none;
padding: 2%;
align-items: center;
overflow: hidden;
display: inline-block;
height:100%;
}
nav img {
margin-top: .8%;
margin-left: 2%;
height: 50px;
width: auto;
position: relative;
}
</style>
</head>
<body>
<nav>
<ul class="left-menu">
<li><img src="Lorem_Ipsum-logo-1662AFAE6D-seeklogo.com.gif" href="index.html"> </li>
<li><a href="index.html" class="homenav">Home</a></li>
</ul>
<ul class="right-menu">
<li><a href="#contact">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="photos.html">Products</a></li>
</ul>
</nav>
</body>