-2
<!DOCTYPE html>
<style>
    img {
        border: 0;
        width: 1%; 
        height: 1%;
        padding: 0px 10px 0px 10px;
    }
</style>
<html>
    <body style="background-color:grey; text-align:center;">
        <div style="white-space:nowrap;">
            <a style="color:#29ff4a" href="#">HOME</a>
            <img src="https://i.ibb.co/7gT6WLJ/New-Piskel-1-png.png" alt="Candy Corn Emoji">
            <a style="color:#39d5f6" href="#">READ</a>
            <p style="color: white">|</p>
            <a style="color:#39d5f6" href="#">INFO</a>
            <img src="https://i.ibb.co/7gT6WLJ/New-Piskel-1-png.png" alt="Candy Corn Emoji">
        </div>
    </body>
</html>

I'm trying to recreate the Homestuck website (www.homestuck.com/story/1/) for fun, and I can't figure out how to make the links on top stay on the same line. I tried using style="white-space:nowrap" on a parent div element for the links, but it doesn't seem to work.

Oskar Brady
  • 17
  • 1
  • 3

2 Answers2

1

how about using span tag instead of p tag.

<a style="color:#39d5f6" href="#">READ</a>
<span style="color: white">|</span>
<a style="color:#39d5f6" href="#">INFO</a>
Hadi R.
  • 403
  • 3
  • 12
1

a, span, img etc. are inline elements. It means that they will not take up entire space and new tags will not take up a new line.

p is a block level element. It means that p tag will take up the entire width and new paragraphs will start from new line.

This is what exactly is happening here. a will not take the entire width but as p is a block level element, it will start from a new line.

<a style="color:#39d5f6" href="#">READ</a>
<p style="color: orange">|</p> <!--I changed color because white is not visible-->

To cope up with this, we have two choices -

1)Use span instead of p. It is and inline element and it will continue with the link. 

<a style="color:#39d5f6" href="#">READ</a>
<span style="color: orange">|</span> <!--I changed color because white is not visible-->

2)Alter the display property of p. We can change the default display property (which is block here) to inline-block or inline using css. 

<a style="color:#39d5f6" href="#">READ</a>
<p style="color: orange; display: inline-block">|</p> <!--I changed color because white is not visible-->

The second method is not very much recommended, still you can use it.

Praneet Dixit
  • 1,393
  • 9
  • 25