Question ? Can't Percents On Width Of a link, Why

[MartyBoi]

I’ve been trying to use % when defining the with of an a link.

Example a{width:2.5%;}, it doesn’t work . So lets say I ant the width 120px, then convert to %, how do I do that?

[shaneisme]

An <a> element is inline, you’ll need to define it as display: block OR even better display: inline-block to manipulate the width.

[MartyBoi]

I have, but yet still can use percents, can use em though.

[shaneisme]

Can you give a live example? I don’t know what you’re trying to do.

[MartyBoi]

Simple : primary-menu ul li a{
display:block;
width:120px;
}

Want to change width from PX to %;

I kno how to o the math and the conversion, but for some reason % isn’t working. PX and EM work, but not %.

120/640 *100 = your percent.

[Lucas4s]

Right, so a is by default a block element. What that means, is that the browser displays it with display: block; naturally. So by default it has a width of 100% of the page, and other elements will have to either go on top or below it.

When you make an element display: inline-block it will only go around the content inside it E.G a span element will only be the with and height of the text inside it. This is what you want from the a, I gather.

By changing the styling of your a element to this:

a { display: inline-block}

you make it an inline element with a width and height of the content inside it. From there you can style it to have a width of E.G 25%.

Note: If there are multiple inline elements beside each other, they will stack beside each other. To change this, I think you could just float the a to the left and then clear it as well. Hope you understand now.

[shaneisme]

An <a> is by default inline.

@Martyboi – Could you set up a codepen (or similar) please?

[Lucas4s]

Wow I can’t believe I said that :] Herpadee Derp.

Sorry, as @Shaneisme said the <a> tag is by default inline-block. Sorry about that.

[shaneisme]

hehe – it’s not inline-block either, but simply inline.

A minor, but very important, detail :)

Chris made a good page on this: https://css-tricks.com/almanac/properties/d/display/

Essentially, you can declare something inline-block and it’s the best of both worlds, but it doesn’t work in very old browsers.

Some think that the <img> tag is by default inline-block, but from what I see in UA stylesheets it’s just inline… of course if it’s actually inline, it’s a special type of inline since you have dimensional properties. I’m pretty sure only <button> is, but I could be wrong.

[Author]

Posts