为什么导航栏没有内联？

Question

它没有在一行中显示导航栏的全部内容好吧，我知道它仍然没有那么复杂，尽管它不起作用我应该在哪里使用显示内联标签

body {
  background-color: rgb(48, 32, 32);
}

.nav {
  background-color: rgb(46, 64, 80);
  color: aquamarine;
  opacity: 0.5;
  height: auto;
  /* display: inline; */
  text-align: center;
}

ul {
  display: inline;
  /* margin: auto; */
}

ul :hover {
  background-color: brown;
  color: aquamarine;
  animation: forwards;
}

li {
  font-size: 8vh;
}

<body>
  <header>
    <div class="nav">
      <nav>
        <ul>
          <div class="link">
            <a href="https://open.spotify.com/playlist/2BYJgVZQoFN2oQwuBCOIm6" target="_blank">
              <img src="sth.jpg" alt="somethin" width="5%">
            </a>
          </div>

          <li>&#187;Home</li>
          <li>&#187;About</li>
          <li>&#187;Contact</li>
        </ul>
      </nav>
    </div>
  </header>
</body>

能否请您指出错在哪里？

Answer 1

你只需要添加“display: inline;”到你的 css li 让他们显示内联，以及将你的图像添加到一个订单项并将其显示为内联块。

<div class="nav">
 <nav>
  <ul>
   <div class="link">
   <a href="https://open.spotify.com/playlist/2BYJgVZQoFN2oQwuBCOIm6" target="_blank">
 
 </a>
 </div>
   <li><img src="https://praestocreative.com/images/pic.png" class="pic" alt="somethin"></li>
   <li>&#187;Home</li>
   <li>&#187;About</li>
   <li>&#187;Contact</li>
  </ul>
 </nav>
</div>

body {
 background-color: rgb(48, 32, 32);
}

.nav {
 background-color: rgb(46, 64, 80);
 color: aquamarine;
 opacity: 0.5;
 height: auto;
 /* display: inline; */
 text-align: center;
}

ul {
 list-style-type: none;
  margin: 0;
  padding: 0;
}

ul :hover {
 background-color: brown;
 color: aquamarine;
 animation: forwards;
}

li {
 font-size: 8vh;
 display: inline;
}

.pic {
 width: 25px;
 height: 25px;
 display: inline-block;
}

https://jsfiddle.net/jasonbruce/knsd40mz/10/

Answer 2

在你身上添加

display:flex

nav

body {
  background-color: rgb(48, 32, 32);
}

.nav {
  background-color: rgb(46, 64, 80);
  color: aquamarine;
  opacity: 0.5;
  height: auto;
  /* display: inline; */
  text-align: center;
}

ul {
  /*display: inline;*/
  /* margin: auto; */
  display: flex;
  list-style: none;
  align-items: center;
}

ul :hover {
  background-color: brown;
  color: aquamarine;
  animation: forwards;
}

li {
  font-size: 8vh;
}

<body>
  <header>
    <div class="nav">
      <nav>
        <ul>
          <div class="link">
            <a href="https://open.spotify.com/playlist/2BYJgVZQoFN2oQwuBCOIm6" target="_blank">
              <img src="sth.jpg" alt="somethin" width="5%">
            </a>
          </div>

          <li>&#187;Home</li>
          <li>&#187;About</li>
          <li>&#187;Contact</li>
        </ul>
      </nav>
    </div>
  </header>
</body>

为什么导航栏没有内联？

问题描述投票：0回答：2

2个回答

最新问题

为什么导航栏没有内联？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2