CODEWITHSUNDEEP
htmlcss
mega_creamery
mega_creamery

Reputation: 677

Trying to position multiple repeated elements that are fixed relative to the viewing point

My button is described like this

<a href="website" class="button">Link 1</a>

Now I have another 4 similar buttons to place beside in a horizontal row besides. 

<a href="website" class="button">Link 2</a>
<a href="website" class="button">Link 3</a>
<a href="website" class="button">Link 4</a>
<a href="website" class="button">Link 5</a>

I want position: fixed;, as I need those buttons to be on the navigation bar and always present relative to the browser window.

enter image description hereBecause of the fixed attribute I can not have display:inline-block or display:inline;.

I did not want to copy the the button 5 times and each time just change the property of position. I thought I could have a general class which would specify what would be the height from the top of the page for the buttons, and then write in the horizontal shift using

<div style="right:10px;">
    <a href="website" style="right: 50px;" class="button">Link 2</a>    
</div>

This is does not work, any containers or attributes added to div can not affect the button position even though in it the right distance is not stated.

I know I can do it it by having multiple distinct classes in my CSS for buttons, but they would be exactly the same except for horizontal alignment and this seems like a wasteful way to go about doing so.

Upvotes: 0

Views: 59

Answers (1)

Johannes
Johannes

Reputation: 67778

fix the navbar as a whole (and not the single nav items). In that fixed nav container you can use inline-blocks

Upvotes: 1

Related Questions