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

Здесь простая структура меню:

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

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

Ответ 1

Тег "a" является элементом встроенного уровня. Элемент встроенного уровня не может иметь свою ширину. Зачем? Поскольку элементы встроенного уровня предназначены для представления потока текста, который теоретически может переноситься из одной строки в другую. В таких случаях не имеет смысла указывать ширину элемента, потому что вы не обязательно знаете, будет ли оно обертываться или нет. Чтобы установить его ширину, вы должны изменить его свойство отображения на 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 и хочет вас смутить.

Ответ 2

Просто сориентируйте A с помощью display:block;:

ul#menu li a { display: block;}

Ответ 3

display:flex

- это способ HTML5.

Смотрите Fiddle

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

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

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

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

.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%; 
}

Ответ 4

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

<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 доступным.

Ответ 5

<!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>

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

Ответ 6

Я использовал этот код для заполнения ширины и высоты 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 */
}

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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