如何在不破坏 <div> 的宽度或布局的情况下将 <div> 包裹在 <a> 中?
How can I wrap <div> within <a> without breaking the width or layout of the <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">
<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>
为什么盒子的布局现在坏了?我该如何解决这个问题?
因为现在 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>
此示例按预期正常工作,水平分布蓝色框。
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>
为什么盒子的布局现在坏了?我该如何解决这个问题?
因为现在 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>