如何在不破坏 <div> 的宽度或布局的情况下将 <div> 包裹在 <a> 中？

Question

此示例按预期正常工作，水平分布蓝色框。

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>

为什么盒子的布局现在坏了？我该如何解决这个问题？

Answer 1

因为现在 div 占 a 标签宽度的 15%。但是，您实际上不需要 div 。只需将 class 移动到 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>

如何在不破坏 <div> 的宽度或布局的情况下将 <div> 包裹在 <a> 中？

How can I wrap <div> within <a> without breaking the width or layout of the <div>?

html

css

anchor

layout

flexbox