如何在 <a> 中包装 <div> 而不会破坏 <div> 的宽度或布局？答案

【问题标题】：How can I wrap <div> within <a> without breaking the width or layout of the <div>?如何在 <a> 中包装 <div> 而不会破坏 <div> 的宽度或布局？
【发布时间】：2020-04-10 18:01:39
【问题描述】：

此示例按预期工作正常，将蓝色框水平间隔均匀。

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>

在上面的例子中，只有文本 sn-ps 是链接。现在我想把整个蓝色框变成链接。这是我的尝试。

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>

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

【问题讨论】：

将类框移动到a元素

标签： html css layout flexbox anchor

【解决方案1】：

因为现在 div 占用了 a 标签的 15% 宽度。不过，您实际上并不需要 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>

【讨论】：