Question

我的导航栏有问题。如果我以管理员身份登录，则会显示一些按钮，而显示给客户端的则是一些按钮。问题是当我以管理员身份登录时，我的导航栏是高还是小取决于我在CSS上设置的宽度。如果我以管理员身份登录，导航栏需要具有其他宽度，我可以在代码中进行哪些更改以使该宽度自动变化。谢谢您的帮助。

<style>
html,
body {
  height: auto;
}

body {
  font-family: "Lato", sans-serif;
  background-color: <?php echo $website_background_color; ?>;
  background-size: cover;

}

.navbar {
  display: flex;
  margin: auto;
  padding: 0;
  margin-top: 15px;
  list-style-type: none;
  background: <?php echo $website_button_color; ?>;
  width: 1000px;
  border-radius: 5px;
  overflow: hidden;
  position: static;
  top: 45px;
  bottom: auto;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
}
.navbar li {
  display: inline-block;
  padding: 15px 18px;
}
.navbar li.right {
  float: right;
}
.navbar li a {
  color: #e8f1f2;
  text-decoration: none;
  font-size: 16px;
}
.navbar li a span.menu {
  display: flex;
  width: 25px;
  height: 3px;
  background: #e8f1f2;
  position: relative;
  top: 7px;
  flex: 1;
}

.navbar li a span.menu::before, .navbar li a span.menu::after {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  background: #e8f1f2;
  position: absolute;
  left: 0;
  right: auto;
  bottom: auto;
    flex: 1;
}
.navbar li a span.menu::before {
  top: -8px;
}
.navbar li a span.menu::after {
  top: 8px;
}


.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


@font-face {
   font-family: logo-font;
   src: url(assets/logo-font-m.otf);
   src: url(assets/logo-font-m.eot);
   src: url(assets/logo-font-m.ttf);
}


.logo-font {
   font-family: logo-font;
   color: <?php echo $website_button_color; ?>;
   text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
}
</style>



</head>

<body>

<center>
<div style="padding-top: 25px;">
<font size="10" class="logo-font no-select"><?php echo $website_name; ?></font>
</div>
</center>

  <ul class="navbar">
      <li>
         <a href="index.php"><i class="fas fa-home"></i> Home</a>
      </li>
      <li>
         <a href="regions.php"><i class="fa fa-list-alt" aria-hidden="true"></i> Regions</a>
      </li>
      <li>
         <a href="search.php"><i class="fa fa-list-alt" aria-hidden="true"></i> Search</a>
      </li>
      <li>
          <a href="request.php"><i class="fa fa-list-alt" aria-hidden="true"></i> Request</a>
      </li>
      <li>
         <a href="contact-us.php"><i class="fas fa-info"></i> Contact Us</a>
      </li>
      <li>
         <a href="access-order.php"><i class="fas fa-eye"></i> Access Order</a>
      </li>


<?php 
if ($_SESSION['admin_logged_in'] == "true"){
  echo '<li><a href="admin-panel.php"><i class="fas fa-lock"></i> Admin Panel</a></li>';
  echo '<li><a href="admin-logout.php"><i class="fas fa-sign-out-alt"></i> Admin Logout</a></li>';
}
?>

Answer 1

如果可以稍稍更改HTML，一种解决方案可能是将ul.navbar包裹在另一个元素（例如nav）中，如下所示（出于演示目的删除了内容）：

<nav>
    <ul class="navbar">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

然后，您将从display: flex中删除width: 1000px和.navbar并将此CSS添加到.navbar中：

display: inline-block;
width: auto;

现在，您将以下CSS应用于新的nav元素，使其成为flex容器并证明其内容合理：

nav {
    display: flex;
    width: 100%;
    justify-content: center;
}

现在.navbar总是和内容一样宽。

这里有一个工作的JSFiddle，我将更改应用于您提供的代码： https://jsfiddle.net/mnqs31cd/

如何设置导航栏自动宽度

1 个答案: