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

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

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

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

9 53
html css xhtml-1.0-strict

9 ответов:

тег "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 неправильно и хочет запутать вас.

111

просто стиль A с A display:block;:

ul#menu li a { display: block;}
13
display:flex

это способ HTML5.

Посмотреть Скрипка

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

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

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

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

.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 выдает (нежное) предупреждение при использовании flex на элементах кнопки, поэтому не предполагайте, что все элементы HTML / теги могут обрабатывать display:flex правильно, или имеют однородное поведение в разных браузерах.

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

8

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

<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 кликабельно.

1

я использовал этот код, чтобы заполнить ширину и высотой 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 */
}
1
<!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>

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

0

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

0

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

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

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

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