Растяжка <a>тега для заполнения всего <li>

Question

Вот простая структура меню:

<ul id="menu">
  <li><a href="javascript:;">Home</a></li>
  <li><a href="javascript:;">Test</a></li>
</ul>

Я хочу растянуть <a> так, чтобы он заполнил все <li>. Я пытался использовать что-то вроде width: 100%; height: 100%, но это не имело никакого эффекта. Как правильно растянуть тег привязки?

Answer 1

Тег «a» является встроенным элементом уровня.Ни один встроенный элемент уровня не может иметь свою ширину.Зачем?Поскольку встроенные элементы уровня предназначены для представления текущего текста, который теоретически может переноситься с одной строки на другую.В таких случаях не имеет смысла указывать ширину элемента, потому что вы не обязательно знаете, будет ли он переноситься или нет.Чтобы установить его ширину, вы должны изменить его свойство display на block или inline-block:

a.wide {
    display:block;
}

...

<ul id="menu">
  <li><a class="wide" href="javascript:;">Home</a></li>
  <li><a class="wide" href="javascript:;">Test</a></li>
</ul>

Если память используется, вы можете установить ширину для определенного встроенногоэлементы уровня в IE6, хотя.Но это потому, что IE6 неправильно реализует CSS и хочет сбить вас с толку.

Answer 2

Просто введите A с помощью display:block;:

ul#menu li a { display: block;}

Answer 3

display:flex

- это путь HTML5.

См. Fiddle

Полезно для взлома кнопок рамок или любого другого элемента, но вам может понадобиться сначала удалить их отступы и установить ихна желаемую высоту.

В этом случае вкладки углового материала, которые довольно сложно заставить их работать в качестве "стандартного" веб-сайта.

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

Не по теме, обратите внимание, как безупречный угловой материал демонстрирует волновой эффект даже на «большой поверхности».

.md-header{
/* THIS IS A CUSTOM HEIGHT */
    height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

md-tab{    
    padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

a{
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 100%; 
}

ОБНОВЛЕНИЕ 2018

AngularJS Material выдает (осторожное) предупреждение при использовании flex на элементах кнопок, поэтому не думайте, что все HTML-элементы / теги могут правильно обрабатывать display:flex или иметь одинаковое поведение во всех браузерах.

Не забудьте проконсультироваться с flexbugs в случае непредвиденного поведения в конкретном браузере.

Answer 4

Простое изменение свойства display на block у меня не сработало.Я удалил отступы li и установил такие же отступы для a.

  li a {
        display:block;  
        padding: 4px 8px;  

  }

Answer 5

Я использовал этот код для заполнения ширины и высоты 100%

HTML

<ul>
    <li>
        <a>I need to fill 100% width and height!</a>
    </li>
<ul>

CSS

li a {
   display: block;
   height: 100%; /* Missing from other answers */
}

Answer 6

Другой подход:

<ul>
    <li>
        <a></a>
        <img>
        <morestuff>TEXTEXTEXT</morestuff>
    </li>
</ul> 

a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: [higher than anything else inside parent]
    width:100%;
    height: 100%;
}  

Это полезно, если в контейнере ссылки также есть изображения и тому подобное, или он может иметь разные размеры в зависимости от размера изображения / содержимого.При этом сам тег привязки может быть пустым, и вы можете расположить другие элементы внутри контейнера привязки по своему усмотрению.Якорь всегда будет соответствовать размеру родительского элемента и будет располагаться сверху, чтобы сделать весь li кликабельным.

Answer 7

Я хотел, чтобы эта функциональность была только в виде вкладок, то есть ниже 720px, поэтому в медиа-запросе я сделал:

@media(max-width:720px){
  a{
    display:block;
    width:100%;
  }
}

Answer 8

Используйте line-height и текстовый отступ вместо отступа для элемента li и используйте display: block; для тег привязки

Answer 9

Если бы ваши <li> s имели определенную высоту, тогда ваши <a> s растягивались бы только на ширину <li>, а не на высоту. Один из способов решить эту проблему - использовать CSS display:block и добавлять отступы к моим <a> s. ИЛИ ЖЕ оберните <a> s вокруг <li> s

<ul id="menu">
      <a href="javascript:;"><li>Home</li></a>
      <a href="javascript:;"><li>Test</li></a>
    </ul>   

Answer 10

<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
    display:block;
}
</style> 
</head>
<body>
    <ul id="menu">
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">Test</a></li>
    </ul>
</body>
</html>

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