我刚刚开始学习HTML和CSS，我正在尝试创建下拉导航，其中下拉列表的边缘在右侧与该下拉列表的导航项目对齐。除了对齐外，一切都很好。
我将下拉列表移至"家庭"导航项目下，以便我可以看到对齐。我还看到了一些建议使用right:0和left:auto的页面，并且我尝试将其放置在很多地方，它无能为力，或者将整个菜单移至浏览器的右边缘。
这是jsfiddle：https：//jsfiddle.net/stepeters17/qm4lkevs/36/
您可以使用right: #px设置距右侧的距离，而您无需包括left: auto。只需将＃替换为所需的像素数即可。您已经包含了大量代码，因此我只会告诉您我添加了什么来解决问题，您可以运行摘要以查看其工作原理。
如果将right: 220px添加到.dropdown-content类中，则将使其与右侧保持一致。文本仍将保持对齐，但是如果您还希望将其正确对齐，则可以通过将text-align: right添加到同一类中来更改。您想将其添加到此类中，因为这是所有下拉内容的容器。
* {
/*global settings */
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-color: whitesmoke;
padding-top: 70px;
padding-left: 20px;
}
/* ---------------------------------------------------------------- Navigation bar styling------------------------------------------------------------------------*/
/*------------- Main Nav Bar-------------- */
.nav-main {
background-color: #333333;
color: white;
font-size: 18px;
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 60px;
/*Set the height so that it doesn't auto change and fill screen when dropdown opens*/
line-height: 36px;
/* 36 (line height) + 4 (border-bottom) + 2*10 (padding top & bottom) = 60 (height of nav)
}
.nav-main .logo{
/* insert logo stlying e.g. float left, height etc. */
}
.nav-main ul {
float: right;
/*Float the list itself to the right of the header */
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-main ul li {
float: left;
/* Float the list items (menu items) left within the list which is floated on the right */
}
.nav-main ul li a {
right:0;
}
#nav-active {
border-bottom: 4px solid red;
}
.nav-item {
/* This is the header item links, i.e. the top items which produce dropdowns */
display: inline-block;
padding: 10px;
color: white;
text-decoration: none;
}
.nav-item:hover {
background-color: dimgrey;
border-bottom: 4px solid red;
}
/*Next 2 statements will hide and unhide the dropdown on hover of nav item*/
.nav-item:hover ~.dropdown-content{
max-height:400px;
-webkit-transition:max-height 0.25s ease-in;
-moz-transition:max-height 0.25s ease-in;
transition:max-height 0.25s ease-in;
}
.dropdown-content:hover {
max-height:400px;
}
/*------------- Dropdown styling-------------- */
.dropdown-content {
position: absolute;
top: 60px;
/*This is the height of the header */
overflow: hidden;
background-color: #333333;
color: white;
font-size: 16px;
max-height:0;
right: 220px;
}
.dropdown-content ul {
margin: 0;
padding: 0;
}
.dropdown-content a {
color: white;
text-decoration: none;
}
.dropdown-sub {
/* This is where we can add things like padding without messing things up */
padding: 0;
margin: 0;
}
.dropdown-sub ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-sub ul li {
float: none;
}
.dropdown-sub ul li a {
width: 100%;
white-space:nowrap;
border-bottom: 4px solid transparent;
display: inline-block;
padding: 3px 10px;
/* 5px padding top&bottom, 10 on l&r */
}
.dropdown-sub ul li a:hover {
background-color: dimgrey;
border-bottom: 4px solid red;
}
/* ---------------------------------------------------------------- End of navigation bar styling----------------------------------------------------------------*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a meta description, this is what often shows up under the search results">
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<!-- Link to stylesheet -->
<link rel="stylesheet" href="Stylesheet2.css">
<!-- Add Roboto font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.css">
</head>
<body>
<!-- This is the top part to all the page docs -->
<!-- Need to add the header code that appears in all docs -->
<header>
<!-- Navigation Bar -->
<nav class="nav-main">
<!--This the container for the header -->
<div class="logo">
<!-- Insert logo in this container then use css to style, e.g. float left -->
</div>
<ul>
<!-- This is the list of nav headers -->
<li>
<!-- This is the actual item for the nav header-->
<a href="#" class="nav-item" id="nav-active">Home</a>
<!-- This is the header item link -->
<div class="dropdown-content">
<!-- Create a couple of divs for the dropdown content... placed at same level as the nav-item itself-->
<div class="dropdown-sub">
<ul>
<!-- Dropdown list -->
<li><a href="#">User Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="nav-item">About</a></li>
<!-- Can sit on one line if no dropdown-->
<li><a href="#" class="nav-item">News</a></li>
<li>
<a href="#" class="nav-item">Account</a>
</li>
</ul>
</nav>
</header>
<!-- Since this gets called using php into all page docs, we don't close the <body> and <html> tags here-->
<!-- Close the <body> and <html> tags in the footer document, which gets called at the end of each page doc -->
<p>Top Line</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
</body>
</html>