我想将"登录"项向右对齐。 我对HTML和CSS很陌生。我什至不知道这是否是创建水平菜单栏的正确方法。 像这样的东西：我想要它如何
这是我的代码：
.HTML：
@import url("FONTS/stylesheet.css");
body {
font-family: 'Roboto', sans-serif;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<a class="loginnav" href="#login">Login</a>
</div>
</body>
</html>我需要更改什么？ 谢谢！
您可以将此代码添加到 CSS 中，它可以.topnav .loginnav {float:right;}
@import url("FONTS/stylesheet.css");
body {
font-family: 'Roboto', sans-serif;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .loginnav {
float: right;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<a class="loginnav" href="#login">Login</a>
</div>
</body>
</html>试试这个：
@import url("FONTS/stylesheet.css");
body {
font-family: 'Roboto', sans-serif;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.right {
position: absolute;
top: 8px;
right: 8px;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>
<div class="topnav">
<div class="left">
<a class="active" href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
<div class="right">
<a class="loginnav" href="#login">Login</a>
</div>
</div>
</body>
</html>这可能是一个不好的方法，但它有效！
将.topnav更改为display: flex，并将margin-left: auto;添加到.loginnav：
body {
font-family: 'Roboto', sans-serif;
}
.topnav {
display: flex;
background-color: #333;
overflow: hidden;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.loginnav {
margin-left: auto;
}<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<a class="loginnav" href="#login">Login</a>
</div>只需将其添加到您的代码中即可。
.loginnav{
margin-left:800px;
}
您可以简单地使用 flex 和自动边距从左侧登录：
body {
font-family: 'Roboto', sans-serif;
}
.topnav {
background-color: #333;
overflow: hidden;
display: flex;
}
.topnav a {
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.loginnav {
margin-left: auto
}
.topnav a:hover {
background: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<a class="loginnav" href="#login">Login</a>
</div>
</body>
</html>请注意，我从a标记中删除了inline-block，并将规则添加到.topnavdisplay: flex;
首先，将其显示为 flex，然后将这些项目对齐到末尾。