How to align tags side by side?

Viewed 45

enter image description here

I tried

<div>
  <tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
  <tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>

resulting in

Home

Contact

How can I align these tags side by side?

4 Answers

try this:

{
  display: inline-block
};

either display:inline or float:left which gives more control (but needs <div style="clear:both"></div> afterwards)

h1 {
  float: left;
  margin-right: 10px;
}
before
<nav>
  <h1>hello</h1>
  <h1>world</h1>
  <div style="clear:both"></div>
</nav>
after

nav {
  display: flex;
}
before
<nav>
  <h1>hello</h1>
  <h1>world</h1>
  <div style="clear:both"></div>
</nav>
after

Ideally, you might benefit from a review of your markup.

Certainly you shouldn't be using multiple <h1> elements within a single document.

The <h1> is the principal heading of the entire document. By definition that means there will only ever be one.

Whenever you want to change the visual presentation of an element, you will use CSS.


HTML Structure

If you are building a navbar, then you can use:

  • <ul> - an unordered list

and nest this inside a:

  • <nav> - a navigation element

CSS Presentation

Once you have a structure like the outline above, there are multiple ways to align elements side-by-side:

  • nav ul { display: flex; }
  • nav ul { display: table; }
  • nav ul li { float: left; }
  • nav ul li { display: inline-block; }

When starting out, one of the simplest ways is to use the last option immediately above:

nav ul li {
  display: inline-block;
}

Working Example:

nav {
  background-color: rgb(191, 0, 0);
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  width: 96px;
  height: 48px;
  line-height: 48px;
  text-align: center;
}

nav ul li a {
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  font-weight: 900;
}
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Related