askvity

How Do I Add Two Links on the Same Line in HTML?

Published in HTML CSS Layout 3 mins read

To add two links on the same line in HTML, you typically use CSS to change their display property from the default inline or block to inline-block. This allows them to sit next to each other while still respecting block-level properties like margin and padding.

By default, <a> tags are inline elements, meaning they naturally flow next to each other on the same line as long as there's space. However, applying styles like margins or fixed widths to inline elements can be unpredictable. Using display: inline-block offers more control.

Using display: inline-block on Links

As referenced, giving your links a display of "inline-block" will make them appear next to each other. This is a common and effective method. You can then add some padding or margin to give them some space between them.

Here's a basic HTML structure:

<a href="#link1">Link One</a>
<a href="#link2">Link Two</a>

And the CSS to make them appear side-by-side with spacing:

a {
  display: inline-block; /* Makes them sit next to each other */
  margin-right: 10px;   /* Adds space between them */
  padding: 5px;          /* Adds padding around each link */
  /* Other styles like text-decoration, color, etc. */
}

Applying display: inline-block to the <a> tags allows them to behave like inline elements (sitting side-by-side) but also accept block-level styling like margin and padding more reliably.

Using <li> Tags with display: inline-block

Another approach, also mentioned in the reference, is using the li tag and giving them the display:inline-block style. This is particularly useful if your links are part of a navigation menu or a list of items.

Here's the HTML structure using <li> tags within a <ul>:

<ul>
  <li><a href="#link1">Link One</a></li>
  <li><a href="#link2">Link Two</a></li>
</ul>

And the CSS:

ul {
  list-style: none; /* Removes default list bullets */
  padding: 0;       /* Removes default padding */
  margin: 0;        /* Removes default margin */
}

li {
  display: inline-block; /* Makes list items sit next to each other */
  margin-right: 10px;   /* Adds space between list items */
}

li a {
  /* Optional: Style the links inside the list items */
  text-decoration: none;
  color: blue;
}

In this method, you apply display: inline-block to the <li> elements. The <a> tags inside the list items will still be inline by default but will follow the layout of their parent <li>.

Choosing the Right Method

Both methods achieve the same visual result of putting links on the same line, but the choice often depends on context:

  • Direct Links with display: inline-block: Simple and direct if the links are just standalone items or not semantically part of a list.
  • <li> with display: inline-block: Semantically correct and best practice for navigation menus (<nav>) or any group of related links that are conceptually a list. It also provides an extra container (<li>) for applying spacing or background styles around each link.

Summary of Techniques

Method HTML Structure Key CSS Property Best For
Direct Link Styling <a></a> <a></a> display: inline-block; Standalone links, simple cases
Using List Items (<li>) <ul><li><a></a></li>...</ul> display: inline-block; Navigation menus, lists of related links

Regardless of the method, using display: inline-block is the recommended way to reliably position block-like elements like links (when styled) side-by-side on the same line while maintaining control over their spacing and dimensions.

Related Articles