I need to align my text. Current it reads in the nav menu:

Home Visit us Shop Our History

I need it to be on the same line, and not have home above the rest.

  <nav class="navigation">
      <p>
     <div id="current"> <a href="index.html">Home</a> </div>
      <a href="placeholder.html">Visit Us</a>
      <a href="placeholder.html">Shop</a>
      <a href="placeholder.html">our History</a>
      </p>
      </nav>

The CSS is here:

.navigation {
    background-color: #333333;
    
    Width: 1024px;
    
    color: #fefefe;

    font-size: 120%;

    

}

#current {
    border-bottom: 3px;

    border-style: solid;

    border-color: #ff0000;

    border-top: 0px;

    border-left: 0px;

    border-right: 0px;

    width:200px;

I am SUPER new to this.

CodePudding user response：

You can use flexbox here

.navigation {
  ...
  display: flex;
  align-items: center;
}

.navigation {
  background-color: #333333;
  width: 1024px;
  color: #fefefe;
  font-size: 120%;
  display: flex;
  align-items: center;
}

#current {
  border-bottom: 3px;
  border-style: solid;
  border-color: #ff0000;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  width: 200px;
}

<nav class="navigation">
  <p>
    <div id="current"> <a href="index.html">Home</a> </div>
    <a href="placeholder.html">Visit Us</a>
    <a href="placeholder.html">Shop</a>
    <a href="placeholder.html">our History</a>
  </p>
</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Using an 'inline element' like <span> as opposed to a 'block-level element' like <div> will fix that.

MDN

.navigation {
  background-color: #333333;
  Width: 1024px;
  color: #fefefe;
  font-size: 120%;
}

#current {
  border-bottom: 3px;
  border-style: solid;
  border-color: #ff0000;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  width: 200px;
}

<nav class="navigation">
  <p>
    <span id="current"><a href="index.html">Home</a></span>
    <a href="placeholder.html">Visit Us</a>
    <a href="placeholder.html">Shop</a>
    <a href="placeholder.html">our History</a>
  </p>
</nav>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>