0

I have a page where links overflow the page. I wish they would stay on the line below.

I put the follow lines: display:inline-block; overflow: auto; But didn't work.

.hashtag {
            font-family: 'Titillium Web', sans-serif;
            padding: 28px;
            font-size: 30px;
            width: auto;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            background-color: rgb(98,124,169,0.8);
            color: white;
            display: inline-block;
            line-height: 1;
<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a>&nbsp;<a href="player-hd/podcasts.html" style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;overflow: auto;" class="hashtag">PODCASTS</a>

(Sorry my English) Thanks in advance.

Improve this question
2
  • 2
    Your CSS is missing a closing } and your HTML opens with an obsolete <center> element and closes with a <span>. Please fix your code. Commented Jun 17, 2019 at 20:41
  • Thank you. I have corrected Commented Jun 17, 2019 at 20:44

1 Answer 1

Reset to default
1

You need to add vertical-align:middle; to .hashtag to stop the first element being dropped down. You can also add white-space: nowrap; to the parent center element to stop the elements wrapping.

center {
  white-space: nowrap;
}
.hashtag {
            font-family: 'Titillium Web', sans-serif;
            padding: 28px;
            font-size: 30px;
            width: auto;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            background-color: rgb(98,124,169,0.8);
            color: white;
            display: inline-block;
            line-height: 1;
            vertical-align:middle;
         }
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a>&nbsp;<a href="player-hd/podcasts.html" style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;overflow: auto;" class="hashtag">PODCASTS</a></span>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for your answer ;)
Sorry doesn't seem to be working. Checking why it isn't now.
@SergioC This should be what you were after now.
Yes, that works, thanks again.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.