Positioning list of links horizontally

[darkwriterxx94]

I’m trying to create a mock browser in my website. I’ve managed to create the links and have them open when clicked on. However, I’m unable to figure out how to arrange them horizontally and move them so that I may position it over the image of the browser I’ve created. I’ve tried many of the solutions found through a google search including changing the display to inline but none of them seem to work.

I’ve pasted what I have so far in codepen: https://codepen.io/darkwriterxx94/pen/BGVJjQ?editors=1010

Any help you can provide would be appreciated.

[Beverleyh]

Looks like you’ve forgotten your CSS.
And the image is linked locally so we can’t see anything – try replacing the link with an online substitute.

I’m unable to figure out how to arrange them horizontally

Inline-block or float the li,
Flexbox: Make the ul a flex parent.

position it over the image

You could use negative margins to pull the list upwards, or put the image and list in container element with relative positioning, and then absolutely position them inside it.

[darkwriterxx94]

I’ve replaced the local image with something close that i found on google. I refrained from adding a css because nothing I tried worked. However, I added one of the ones I tried.

[darkwriterxx94]

Ok, I think I figured it out using the information you provided above. However, I tried to enter it into my wordpress site and they all seem to overlap. I’ve tried adjusting the padding but nothing.

[Beverleyh]

Ok – pop the latest code into a CodePen demo and we can take a look.

Note that we only need the minimal amount of code to demo the problem – we don’t need the whole codebase. The developer toolbar should help you identify all the pertinent CSS – that’s F12 in most browsers. Use it to inspect the elements and see their applied CSS in the styles pane. From there you can transfer all applicable code to your demo; your own styles and any contributing/conflicting CSS from the theme you’re using.

[JeroenR]

Set your #horizontal-list li styling to display: inline-block; instead of display: inline;. Then you can do something with padding, like padding: 0 0.3rem; for example.

[Author]

Posts