向右移动菜单项

时间：2019-02-22 03:10:18

标签： html css

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

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

right now

预期结果：

expected 

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>

3 个答案:

答案 0 :(得分：0)

使用float: right;

您必须调整下拉菜单，这样它们才不会离开屏幕。

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

.right {
  float: right;
}

.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;
}
<!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">
</head>
<body>

<div class="navbar">
  <div class="right">
  <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>

答案 1 :(得分：0)

在导航栏中创建另一个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>

答案 2 :(得分：0)

要感谢ajzbc的最终代码...现在可以添加所有PHP，因此菜单项仅向合适的用户显示，但是我认为我可以完全不了解CSS来完成这项工作。

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

.right {
   float: right;
}

.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;
}

.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-right {
  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-right 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;
}

.dropdown:hover .dropdown-content-right {
  right: 4px;
  left: auto;
  display: block;
}

</style>
<!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">

</head>
<body>

<div class="navbar">
  <div class="right">
  <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="usricon.png" height="20" width="20"> 
      </button>
    <div class="dropdown-content-right">
      <a href="changePassword.php">Change Password</a>
      <a href="logout.php">Log Out</a>
    </div>
  </div> 
  </div>
</div>

</body>
</html>

相关问题
最新问题