Como utilizar el tamaño de una etiqueta <a> al 100% de un <li>

Buen dia mi pregunta es un tanto sencilla y me gustaria saberlo hacer de una manera correcta o una buena practica.

<ul>
 <li>
  <a>enlace</a>
 </li>
</ul>

al agregar los estilos correspondientes (sin padding) quiero que al estar posicionado en cualquier parte del elemento lista tenga la dimension de la etiqueta a en pocas palabras que etiqueta a tenga el 100% de tamaño del li y no solo al posicionarse en el texto de etiqueta a

1
задан 28.10.2016, 22:18
3 ответа

<a> это элемент inline, следовательно ты не можешь распределять ему размеры.

Ты должен менять это в элемент block и так ты можешь давать ему один width: 100%; и у тебя будет вся ширина <li>:

Вариант: display: inline-block;

li {
  /* no relevante */
  list-style: none;
  width: 100px;
}

a {
  width: 100%;
  display: inline-block;
  
  /* no relevante */
  color: white;
  background: red;
  text-decoration: none;
  text-align: center;
}
<ul>
 <li>
  <a href=".">enlace</a>
 </li>
</ul>

Вариант: display: block;

li {
    /* no relevante */
    list-style: none;
    width: 100px;
}

a {
  /* width: 100%; default */
  display: block;

  /* no relevante */
  color: white;
  background: red;
  text-decoration: none;
  text-align: center;
}
<ul>
  <li>
    <a href=".">enlace</a>
  </li>
</ul>
5
ответ дан 24.11.2019, 12:52
  • 1
    Большое спасибо @aldanux точно то, в чем он нуждался. – matteo 28.10.2016, 22:30
  • 2
    Просто объяви display: block; в твоем элементе <a>. Объявлять display: inline-block; и despu и # 233; s width: 100%; противоречивый. и #191; Для qu и # 233; ты хочешь, чтобы браузер сделал render в элемент как будто он был в l и # 237; nea, поддерживая свойства блока, если despu и # 233; s ты изменишь ширину ста процентам, точно то, что делает элемент блока? – Ricky 01.11.2016, 08:28
  • 3
    @Ricky_Ruiz - Противоречивый? Dir и # 225; s скорее всего soluci и # 243; n различный... Я например: признал всегда элементом назначенными по умолчанию <a> display: inline-block в моих стилях css, чтобы предотвращать просто эти вещи: смотрит ... – Black Sheep 01.11.2016, 12:50
  • 4
    @aldanux Возможно противоречивым не было слово. demo, который ты предоставляешь, - situaci и # 243; n различный, есть те, кто считают, что это не хороший pr и # 225; ctica менять свойства такие как est и # 225; s делая ах и # 237;. Которое я имею в виду, дело в том, что display: inline-block вместе с width: 100%; delcaradas в том же классе - эквивалент, который нужно использовать, и #250; nicamente display: block;. – Ricky 01.11.2016, 16:26
  • 5
    @Ricky_Ruiz - я даю Тебе весь raz и # 243; n, поэтому я обновил tambi и # 233; n мой ответ, для того, чтобы они увидели, что есть 2 выбора, если один это желает... Как уже я сказал тебе, что я объявляю всегда <a> из-за default inline-block из-за гибкости. – Black Sheep 01.11.2016, 16:34

Может быть, ты можешь делать: <a><li>.item1.</li></a> Это было бы должно истекать, с которым queres делать.

0
ответ дан 24.11.2019, 12:52
  • 1
    Возможно., но не v и # 225; lido W3C - Элементы block не могут идти внутри элементов inline – Black Sheep 01.11.2016, 16:43
  • 2
    @aldalux в HTML5 ссылки могут включать элементы блока: " The в element в мае be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long эксперт there is не интервключил content within" Aqu и # 237; ссылка: w3.org/TR/html5/text-level-semantics.html#the-a-element – blonfu 02.11.2016, 11:12

CSS для этикетки <a>.

width: 100%

0
ответ дан 24.11.2019, 12:52
  • 1
    Уже попробуйте это @Vitmar, но оно не функционирует я предполагаю, что я должен добавлять padding к li, но не уверен, если это был способ, он отлаживает их и правильная – matteo 28.10.2016, 22:27