Как я могу обернуть <div>в <a>, не нарушая ширину или расположение <div>? - PullRequest
Новая
       10

Как я могу обернуть <div>в <a>, не нарушая ширину или расположение <div>?

0 голосов
/ 10 апреля 2020

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

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  background: lightblue;
  border: thin solid blue;
  padding: 1em;
  width: 15%;
}
<div class="container">
  <div class="box"><a href="#">Lorem Ipsum</a></div>
  <div class="box"><a href="#">Lorem Ipsum</a></div>
  <div class="box"><a href="#">Lorem Ipsum</a></div>
  <div class="box"><a href="#">Lorem Ipsum</a></div>
</div>

В приведенном выше примере только текстовые фрагменты являются ссылками. Теперь я хочу превратить все синие поля в ссылки. Вот моя попытка. 

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  background: lightblue;
  border: thin solid blue;
  padding: 1em;
  width: 15%;
}
<div class="container">
  <a href="#"><div class="box">Lorem Ipsum</div></a>
  <a href="#"><div class="box">Lorem Ipsum</div></a>
  <a href="#"><div class="box">Lorem Ipsum</div></a>
  <a href="#"><div class="box">Lorem Ipsum</div></a>
</div>

Почему расположение блоков теперь нарушилось? Как я могу это исправить?

1 Ответ

1 голос
/ 10 апреля 2020

Потому что теперь div принимает 15% ширины тега a. Тем не менее, вам не нужно div в реальном. Просто переместите класс в тег a. 

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  background: lightblue;
  border: thin solid blue;
  padding: 1em;
  width: 15%;
}
<div class="container">
  <a class="box" href="#">Lorem Ipsum</a>
  <a class="box" href="#">Lorem Ipsum</a>
  <a class="box" href="#">Lorem Ipsum</a>
  <a class="box" href="#">Lorem Ipsum</a>
</div>
...