时间戳

首页 > 解决方案 > 向右移动菜单项

html - 向右移动菜单项

问题描述

我正在处理从https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar获得的代码，并尝试对其进行修改以满足我的需要。

到目前为止，我已经设法使我的所有菜单项按我想要的方式工作并获得正确的样式，但我无法让菜单项向右移动。

马上

预期结果：

预期的

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  width: 100%;
  overflow: hidden;
  background-color: #8FC3EA;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown .dropbtn-right {
  position: absolute;
  right: 5px;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #8FC3EA;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar">
  <a href="#home">Home</a>
  <a href="startTest.php">Issue Test</a>
  <div class="dropdown">
    <button class="dropbtn">Test Results 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="gradeTest.php">Grade Test</a>
      <a href="viewReport.php">View Report</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">Admin 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="editTest.php">Edit Test</a>
      <a href="users.php">Users</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn"><img src="userIcon.png" height="30" width="30"> 
      </button>
    <div class="dropdown-content">
      <a href="changePassword.php">Change Password</a>
      <a href="logout.php">Log Out</a>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

在导航栏中创建另一个 div，并将其浮动到右侧，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>     
        body {
          font-family: Arial, Helvetica, sans-serif;
        }

        .navbar {
          width: 100%;
          overflow: hidden;
          background-color: #8FC3EA;
        }

        .nav-content {
            float : right ; 
        }

        .navbar a {
          float: left;
          font-size: 16px;
          color: white;
          text-align: center;
          padding: 10px;
          text-decoration: none;
        }

        .dropdown {
          float: left;
          overflow: hidden;
        }

        .dropdown .dropbtn {
          font-size: 16px;  
          border: none;
          outline: none;
          color: white;
          padding: 10px;
          background-color: inherit;
          font-family: inherit;
          margin: 0;
        }

        .dropdown .dropbtn-right {
          position: absolute;
          right: 5px;
          font-size: 16px;  
          border: none;
          outline: none;
          color: white;
          padding: 10px;
          background-color: inherit;
          font-family: inherit;
          margin: 0;
        }

        .navbar a:hover, .dropdown:hover .dropbtn {
          background-color: #8FC3EA;
        }

        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
        }

        .dropdown-content a {
          float: none;
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
        }

        .dropdown-content a:hover {
          background-color: #ddd;
        }

        .dropdown:hover .dropdown-content {
          display: block;
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="nav-content">
        <a href="#home">Home</a> <a href="startTest.php">Issue Test</a> 
        <div class="dropdown">
            <button class="dropbtn">Test Results <i class="fa fa-caret-down"></i> </button> 
            <div class="dropdown-content">
                <a href="gradeTest.php">Grade Test</a> <a href="viewReport.php">View Report</a> 
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">Admin <i class="fa fa-caret-down"></i> </button> 
            <div class="dropdown-content">
                <a href="editTest.php">Edit Test</a> <a href="users.php">Users</a> 
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn"><img src="userIcon.png" height="30" width="30"> </button> 
            <div class="dropdown-content">
                <a href="changePassword.php">Change Password</a> <a href="logout.php">Log Out</a> 
            </div>
        </div>
    </div>
</div>
</body>
</html>

推荐阅读