How do you put links in the same line as different links to different pages?

I'm new to HTML so I don't really know much, but how do you put links on the same layer/line as different links? I put them as different classes, but I don't know if that's really the problem. Please help me put them in the same line/layer! I looked everywhere on Google and stack overflow, but it seems that I can't find an answer. My results were something like this:

link1 link2

, but i want it to be like this.

link1 link2

Please help! (Use CSS and HTML)

Answer

<a> tags by default are inline, meaning they naturally sit next to each other on the same line.

If you already have class you can use :

html :

<a class="link1" href="page1.html">Link 1</a>
<a class="link2" href="page2.html">Link 2</a>

css :

.link1, .link2 {
display: inline-block; /* or inline */
}

Or :

<style>
    .nav-links a {
      display: inline-block; /* or just use inline */
      margin-right: 10px; /* spacing between links */
      text-decoration: none; /* remove underline (optional) */
      color: blue; /* color (optional) */
    }
  </style>
</head>
<body>
  <div class="nav-links">
    <a href="page1.html">Link 1</a>
    <a href="page2.html">Link 2</a>
    <a href="page3.html">Link 3</a>
  </div>

Answer

Enjoyed this question?