Что может привести к тому, что тег привязки не заполняет тег li?

Question

В принципе, у меня есть ul с 3 li, все поплавка слева, первая и последняя с width: 20% и вторая li с width: 60%.

У меня есть якорная бирка внутри второго элемента li, с некоторым текстом и display: block; width: 100%; text-align: center;.

Дело в том, что текст не центрирован, потому что тег привязки не заполняет тег li.

Что может быть причиной этого?

EDIT:

Я имел float: left; в теге привязки. Глупая ошибка, спасибо всем.

Answer 1

Попробовал ваш случай в this jsfiddle он работает, как вы хотели.

я удалил из тега привязки:

width: 100%; 

Проверьте это и сравнить, если вы не можете найти все, что вы перепутались, может быть, есть что-то еще в вашем коде, который предотвращает от работы в порядке.

Answer 2

Удалить display: block с <a> при использовании width: 100%.

Answer 3

Вот простой пример использования небольшого количества кода, который вы предоставили, который не показывает вашу проблему.

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); 
} 

Существует что-то в вашем коде вы не сказали нам о том, что является причиной проблемы. Изучите этот простой пример, чтобы узнать, что это такое.

JSFiddle