'Put text on one line

I want to put the "nav" text onto one line. It is currently displayed in a column.

<div class="nav">
  <p>Home</p>
  <p>City</p>
  <p>Nature</p>
  <p> Gallery</p>
  <p> Maps</p>
  </div>

.nav {
    display: inline;
    font-family: 'Montserrat';
    font-weight: 100;
    font-style: normal;
    font-size: 40px;
    line-height: 37px;
    color: #000000;
    position: absolute;
    top: 48px;
    left: 365px;
    word-spacing: 90px;
}
htmlcss


Solution 1:[1]

Change the display property of the P elements.

    .nav {
    display: inline;
    font-family: 'Montserrat';
    font-weight: 100;
    font-style: normal;
    font-size: 28px;
    line-height: 37px;
    color: #000000;
    position: absolute;
    top: 48px;
    left: 10px;
    word-spacing: 40px;
}

.nav p {
    display: inline; 
}
<div class="nav">
  <p>Home</p>
  <p>City</p>
  <p>Nature</p>
  <p>Gallery</p>
  <p>Maps</p>
  </div>

but why use p to begin with? it's a display:block element. maybe span or li?

Solution 2:[2]

Heres some sample of a flex navigation from your code. I edited some of you css so you can easily manage it when it when you resize it. I added some hover on it so it looks like a navigation.

.nav {
    display: flex;
    gap: 20px;
    font-family: 'Montserrat';
    font-weight: 100;
    font-style: normal;
    font-size: 30px;
    color: #000000;
    position: absolute;
    top: 48px;
    right: 20px;
    top:10px;
    word-spacing: 90px;
}

.nav p:hover {
    color:green;
    text-decoration:underline;
    }
<div class="nav">
  <p>Home</p>
  <p>City</p>
  <p>Nature</p>
  <p> Gallery</p>
  <p> Maps</p>
  </div>

Solution 3:[3]

Most navbar items are placed using display: flex. You might also want to separate your items inside the flexbox (here, they are your p tags) a little with gap applied to .nav (or, alternatively with margin/padding on the p tags):

    .nav {
    display: flex;
    gap: 16px;
    }

I recommend giving the MDN article on flexbox a read through to learn more about using it in a layout, as it has many useful properties!

Solution 4:[4]

Use display: flex and flex-direction: row to make your elements display in a row

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yarin_007
Solution 2 Crystal
Solution 3
Solution 4 Harley Swift

Related Questions