Question

我想将导航栏的高度设置为auto，所以当有人调整其高度以增加或减小时，取决于屏幕或浏览器的调整大小，但是它不起作用，这意味着我调整ul li a的大小时导航栏

#navbar {
    width:100%;
    height:45px;
    background: black;
    box-shadow: 2px 5px rgb(252,227,0,.5);
    text-align: center;
    position: fixed;
    top:0;
    z-index: 100;
    float:top;
}
#navbar ul li {
    display: inline;
}

#navbar ul {
    margin-top:7px;
    display: inline-block;
    color:rgb(252,227,0);
    font-size:1.2rem;
    right:0;
    position: fixed;
}

#navbar ul li .a2,.a3,.a4 {
    padding-left:105px;
    cursor: pointer;
    color:rgb(252,227,0);
    font-size:1.2rem;
    text-decoration: none;
    transition: .5s;
}

<div id="navbar">
    <ul>
        <li><a href="#" class="a1"><i class="fas fa-bars"></i>Menu</a></li>
       <li><a href="#" class="a2"><i class="fas fa-shopping-cart"></i>Merchandise</a></li>
       <li><a href="#" class="a3"><i class="fas fa-info-circle"></i>About band</a></li>
       <li class="drop"><a href="#" class="a4"><i class="fas fa-music"></i>Listen now...</a></li>
   </ul>
   </div>

Answer 1

Solution: -

If you want to set height of navbar auto...So you have to remove height and background from #navbar..

*#navbar {
    height:45px;
    background: black;
}*

- > Add Background and some padding on ul also set the width 100%.

#navbar ul{
    background: black;
    padding: 12px 10px;
    width: 100%;
}

Answer 2

declare const tag: unique symbol
export type EUR = number & { readonly [tag]: 'EUR' };

#navbar {
  width: 100%;
  min-height: 45px;
  background: black;
  box-shadow: 2px 5px rgb(252, 227, 0, .5);
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 100;
}

#navbar ul li {
  display: inline;
}

#navbar ul {
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  color: rgb(252, 227, 0);
  font-size: 1.2rem;
}

#navbar ul li .a2,
#navbar ul li .a3,
#navbar ul li .a4 {
  display: inline-block;
  padding-left: 105px;
  cursor: pointer;
  color: rgb(252, 227, 0);
  font-size: 1.2rem;
  text-decoration: none;
  transition: .5s;
}

当我将高度设置为自动时，它对li无效

2 个答案: