时间戳

首页 > 解决方案 > CSS问题排队菜单

php - CSS问题排队菜单

问题描述

菜单抽屉右边缘应与菜单栏的右边缘对齐

在此处输入图像描述

除了右端的用户按钮外，我的菜单栏运行良好，在这种情况下，抽屉没有正确对齐，因为抽屉的右边缘应与菜单的右边缘对齐。

PHP

<?php
   if ($_SESSION['userrole'] !== 'Applicant') {
      echo( '<div class="navbar">' );
      echo( '<div class="right">' );
      echo( '<a href="index.php">Home</a>' );
      echo( '<div class="dropdown">' );
      echo( '<button class="dropbtn">Applicants' );
      echo( '<i class="fa fa-caret-down"></i>' );
      echo( '</button>' );
      echo( '</div>' );
      echo( '<div class="dropdown">' );
      echo( '<button class="dropbtn">Test Results' );
      echo( '<i class="fa fa-caret-down"></i>' );
      echo( '</button>' );
      echo( '<div class="dropdown-content">' );
      echo( '</div>' );
   }
   echo( '<div class="dropdown" style="float:right;">' );
   echo( '<button class="dropbtn"><img src="/resources/usericon.png" height="18" width="18">' );
   echo( '</button>' );
   echo( '<div class="dropdown-content">' );
   echo( '<a href="changePassword.php">Change Password</a>' );
   echo( '<a href="logout.php">Log Out</a>' );
   echo( '</div>' );
   echo( '</div>' );
   echo( '</div>' );
   echo( '</div>' );
?>

CSS

    .navbar {
      overflow: hidden;
      background-color: var(--DAI-Gry);
    }

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

    .dropdown .dropbtn {}

    #dropicon {}

    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: var(--DAI-Blu);
    }

    .dropdown-content {
      display: none;
      position: absolute;
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      display: block;
      text-align: left;
    }

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

    .dropdown:hover .dropdown-content {
      display: block;
    }

我已经清理了导航栏的一些代码以及一些不相关的 CSS（主要是文本格式）以减小代码的大小，所以请告诉我是否删除了一些可能有帮助的代码，我可以在评论中发布

标签： phphtmlcssnavbar

解决方案

首先，您可以使用heredoc 代替大量的回声。链接在这里-

https://www.php.net/manual/en/language.types.string.php

你可以这样写——

$html = <<<EOD
<div class="dropdown" style="float:right;">
<button class="dropbtn"><img src="/resources/usericon.png" height="18" width="18">
  </button>
<div class="dropdown-content">
  <a href="changePassword.php">Change Password</a>
  <a href="logout.php">Log Out</a>
</div>
</div>
EOD;
echo $html;

在此部分中的下拉列表旁边放置一个新类（登录下拉列表）-

$html = <<<EOD
<div class="dropdown login-dropdown" style="float:right;">
<button class="dropbtn"><img src="/resources/usericon.png" height="18" width="18">
  </button>
<div class="dropdown-content">
  <a href="changePassword.php">Change Password</a>
  <a href="logout.php">Log Out</a>
</div>
</div>
EOD;
echo $html;

这是CSS-

.login-dropdown{
   position: relative;
}

.login-dropdown .dropdown-content{
   position: absolute;
   width: 100%;
   max-width: 300px;
   left: 0;
   top: 0;
}

现在在.login-dropdown .dropdown-content的 css中将left和top的值设置为px/pt/%中的要求

推荐阅读