CSS问题排队菜单答案

【问题标题】：CSS issues lining up menuCSS问题排队菜单
【发布时间】：2020-09-26 04:49:07
【问题描述】：

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

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

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（主要是文本格式）以减小代码的大小，所以如果我删除了一些可能有帮助的代码，请告诉我我可以在 cmets 中发布它

【问题讨论】：

不是解决问题的方法，只是观察一下，测试结果下拉列表的关闭 div 可能不在正确的位置。
结束 div 在那里，stackoverflow 说我有太多代码，所以我开始从帖子中剥离一些，但结束 div 在实际页面代码中。

标签： php html css navbar

【解决方案1】：

首先你可以使用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;
}

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

【讨论】：