Question 44333 in Html Question posted in
Some basic documentation can be found here.

Why is the nav bar not inlined? – Html

It is not showing the whole content of Nav bar in a single line
Well I know that it ain’t that complex still though it isn’t working
Where should I use the display inline tag

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>»Home</li>
          <li>»About</li>
          <li>»Contact</li>
        </ul>
      </nav>
    </div>
  </header>
</body>

Can you please point out where is the mistake?

Tags:

2

Answers


  1. 0

    You just need to add "display: inline;" to your css li to get them to display inline, as well as add your image to a line item and display it as inline-block.

    <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/

    Login or Signup to reply.
  2. 0

    add display:flex in you 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search