[Solved] Is it possible to arrange divs to form a horizontal nav menu?

Question

1) instead of display: inline; try display: inline-block;

2) Instead of trying to make a UL horizontal, why not use <div> tags instead? Set the <div>s to display: inline-block, and you should be able to get the horizontal list you’re describing.

<div class="container">
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="https://stackoverflow.com/questions/29724118/?">This is link ?</a></p>
</div>
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="https://stackoverflow.com/questions/29724118/?">This is link ?</a></p>
</div>
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="https://stackoverflow.com/questions/29724118/?">This is link ?</a></p>
</div>
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="https://stackoverflow.com/questions/29724118/?">This is link ?</a></p>
</div>
</div>

I would use this format, not a UL

EDITED

You need to reorganize your <div class="saurav100">

I recommend the following structure:

<div class="saurav100">
  <span>Tech &nbsp;Store</span>
  <span><a class="pageload-link" href="#page-2">Login</a></span>
</div>

Then just remove the styling from the ‘login’ link with:

link {
  font-size: 16px;
  font-family: arial;
  text-shadow: none;
}

Accepted Answer