如何使导航栏自动宽度答案

【问题标题】：How to make navbar autowidth如何使导航栏自动宽度
【发布时间】：2020-04-01 06:55:04
【问题描述】：

我的导航栏有问题。如果我以管理员身份登录，则会显示一些按钮，并且会为客户显示一些按钮。问题是当我以管理员身份登录时，我的导航栏是高还是小取决于我在 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>';
}
?>

【问题讨论】：

旁注：您在标题之前输出。

标签： php html css session

【解决方案1】：

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

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

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

display: inline-block;
width: auto;

现在您将以下 css 应用到新的 nav 元素，使其成为弹性容器并证明其内容：

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

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

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

【讨论】：