Избегайте дополнительного места в анкере, вызванного высотой линии - гибкое расположение - PullRequest
Новая
       14

Избегайте дополнительного места в анкере, вызванного высотой линии - гибкое расположение

0 голосов
/ 21 января 2020

У меня есть этот набор ящиков со ссылками, и они отображаются как флекс. Проблема заключается в том, что охват области, на которую можно кликать (желтая область), является непостоянным из-за высоты каждого поля. Установка нулевой высоты строки тега привязки решит проблему, но это приводит к другим проблемам, таким как наложение текста. Как я могу исправить эту проблему, сохраняя при этом как высоту строки, так и поведение при изгибе?

Спасибо 

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li {
  border: 1px solid red;
  background: #fff;
  flex: 1 1 0;
}

a {
  background: yellow;
  text-decoration: none;
  padding: 40px;
  display: inline-block;
  line-height: 1.3;
  /*height: 100%;
  box-sizing: border-box;*/
  width: 100%;
}
<ul>
  <li>
    <a href="#">
        one 
      </a>
  </li>
  <li>
    <a href="#">
        two blah blahdfdfdfdfdfdfd
      </a>
  </li>
  <li>
    <a href="#">
        three blah blah
      </a>
  </li>
  <li>
    <a href="#">
        four
      </a>
  </li>
  <li>
    <a href="#">
        five
      </a>
  </li>
  <li>
    <a href="#">
        six
      </a>
  </li>
</ul>

1 Ответ

1 голос
/ 21 января 2020

Вы должны добавить height: 100%; box-sizing: border-box; к a css

ul {
  list-style: none;
  display: flex;
}

li {
  border: 1px solid red;
  background: #fff;
}

a {
  background: yellow;
  text-decoration: none;
  padding: 40px;
  display: inline-block;
  line-height: 1.3;
  height: 100%;
  box-sizing: border-box;
}
<ul>
  <li>
    <a href="#">
        one 
      </a>
  </li>
  <li>
    <a href="#">
        two blah blah
      </a>
  </li>
  <li>
    <a href="#">
        three blah blah
      </a>
  </li>
  <li>
    <a href="#">
        four
      </a>
  </li>
  <li>
    <a href="#">
        five
      </a>
  </li>
  <li>
    <a href="#">
        six
      </a>
  </li>
</ul>
...