CODEWITHSUNDEEP
css
Gustavo Semião-Lobo
Gustavo Semião-Lobo

Reputation: 2628

What can cause an anchor tag does not fill a li tag?

Basically, I have an ul with 3 li's, all floated to the left, the first and the last with width: 20% and the second li with width: 60%.

I have an anchor tag inside the second li element, with some text, and display: block; width: 100%; text-align: center;.

The thing is that the text is not centered because the anchor tag doesn't fill the li tag.

What can cause that ?

EDIT:

I had float: left; in the anchor tag. Stupid mistake, thank you all.

Upvotes: 0

Views: 1025

Answers (3)

abpetkov
abpetkov

Reputation: 914

Tried your case out in this jsfiddle have it working as you intended.

I removed from the anchor tag:

width: 100%;

Check it out and compare, if you don't find anything you messed up, maybe there is something else in your code that prevents that from working fine.

Upvotes: 3

bookcasey
bookcasey

Reputation: 40473

Here is a simple example using the small amount of code you provided that does not exhibit your problem.

HTML:

<ul>
    <li></li>
    <li class="link"><a href="">Test</a></li>
    <li></li>
</ul>

CSS:

html, body {
    margin: 0;
    padding: 0;
}

li {
    display: block;
    float: left;
    width: 20%;
    height: 2em;
    list-style-type: none;
    background: salmon;
}

.link {
    width: 80%;
    background: lightblue;
}

.link a {
    display: block;
    width: 100%; 
    text-align: center;
    background: rgba(0, 0, 0, .25);
}

There is something in your code you didn't tell us about that is causing your problem. Study this simple example to find out what it is.

JSFiddle

Upvotes: 1

Mooseman
Mooseman

Reputation: 18891

Remove display: block from the <a> when using width: 100%.

Upvotes: 0

Related Questions