Question

我想将“登录”项右对齐。我对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>

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

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

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

这可能是一种不好的方法，但是可以！

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

Answer 4

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

    .loginnav{
        margin-left:800px;
    }

Answer 5

您可以简单地使用flex并从左边自动为登录设置边距：

import TextStylel, {bl1, lbl2} from './path/to/config.js';

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>标记中删除了inline-block，并将规则a添加到了.topnav

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

顶部菜单-将一个项目向右对齐

5 个答案: