Describing the appearance of my button
<a href="website" class="button">Link 1</a>
Now, I need to place another set of 4 similar buttons in a horizontal row next to it.
<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 these buttons to have a position: fixed; so they stay on the navigation bar and remain visible relative to the browser window.
https://i.stack.imgur.com/nmb33.pngHowever, due to the fixed attribute, I can't use display:inline-block or display:inline;.
I didn't want to repeat the same button code multiple times just to adjust the position properties. Instead, I thought about creating a general class that would define the vertical positioning of the buttons and then use inline styles for horizontal alignment like this:
<div style="right:10px;">
<a href="website" style="right: 50px;" class="button">Link 2</a>
</div>
Unfortunately, this method did not work as any additional containers or attributes added to the div element did not affect the button position, even if no right distance was specified.
I could create separate CSS classes for each button with slight variations in horizontal alignment, but this approach seems inefficient and redundant.