Why is my right-aligned text lower than my left-aligned text in the header? (pure HTML)

Yen 0
Viewed 20

I'm trying to create a small "menu" on the right where you can navigate to other pages, but for some reason, it hangs lower than the left-aligned text. I want them to be on the same level.

<html lang="en">


<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>
  <header>
    
    <div style="display:inline-block;">
    <p align = "left">
      Test
    </p>
    </div>
    
    <div style="display:inline-block;">
    <p align = "right">
        <a href="testOne.html">One</a> |
        <a href="testTwo.html">Two</a>
    </p>
    </div>
    
  </header>
</body>


</html>

It gives this result: enter image description here

I would ideally like something like this (same level with a black bar underneath): enter image description here

However I'm trying to achieve it in pure HTML, without using CSS or whatnot.

alignment header html
3 Answers

To truly do what you are asking, with no CSS:
I think you have to resort to using a table layout. Set the width attribute to 100% (Note: The <table> width Attribute is not supported by HTML 5). Then use the align attribute of the <td> for the left and right text alignment. For the line underneath use a <hr>.

<table width="100%">
  <tr>
    <td align="left">test</td>
    <td align="right">
      <a href="testOne.html">One</a> |
      <a href="testTwo.html">Two</a>
    </td>
  </tr>
</table>
<hr>

Arleigh Hix0

Because they are not in an inline tag. <p> is a block element tag adding another <p> creates another line, thus the nested <a> tags in the <p align = "right"> appears on the next line

This is how your code is getting structured by your code above enter image description here

user0DA60

I found the solution for whoever might be searching for this.

Adding the div style works for putting them on the same line but to make the left/right-alignment work, I needed to add ;float: right.

<html lang="en">


<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>
  <header>
    
    <div style="display:inline-block;">
    <p>
      Test
    </p>
    </div>
    
    <div style="display:inline-block;float: right">
    <p>
        <a href="testOne.html">One</a> |
        <a href="testTwo.html">Two</a>
    </p>
    </div>
    
  </header>
</body>


</html>
Yen0
Related