顶部菜单 - 将一项向右对齐答案

【问题标题】：Top Menu - Align One Item to right顶部菜单 - 将一项向右对齐
【发布时间】：2018-09-15 20:57:01
【问题描述】：

我想将“登录”项向右对齐。我对 HTML 和 CSS 很陌生。我什至不知道这是否是创建水平菜单栏的正确方法。像这样：How I want it to be

这是我的代码：

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>

我需要改变什么？非常感谢！

【问题讨论】：

标签： html css alignment text-align

【解决方案1】：

您只需将此代码添加到您的 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>

【讨论】：

【解决方案2】：

试试这个：

@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>

这可能是一个不好的方法，但它有效！

【讨论】：

对不起，我只是想快速帮助你：P

【解决方案3】：

将.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>

【讨论】：

【解决方案4】：

只需将其添加到您的代码中。

    .loginnav{
        margin-left:800px;
    }

【讨论】：

当视口宽度发生变化时这将不起作用
那么你就可以使用<meta name="viewport" content="width=device-width, initial-scale=1">或者@media

【解决方案5】：

您可以简单地使用 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，并在.topnav 中添加了规则display: flex;

首先，将其显示为 flex，然后将这些项目对齐到末尾。

【讨论】：