问题描述
我有两组复选框,每个复选框在鼠标悬停时都有一个“环”(我只是在下面的代码中简化了这一点,环直接显示,无论如何它不是那么重要。)
问题是我需要保持所有复选框行的宽度相同,宽度也应该适应最长的文本,所以所有的“环”看起来都一样。 (在这种情况下,4个环的宽度都应该和checkBox1一样)
.group {
display: flex;
flex-direction: column;
}
.checkBox {
border: 2px solid red;
border-radius: 6px;
width: fit-content;
}
<div class="group">
<h2>Group 1</h2>
<div class="checkBox"><input type="checkBox" id="checkBox1"><label for="checkBox1">checkBox1 super super long texttexttexttexttexttexttexttexttexttext</label></div>
<div class="checkBox"><input type="checkBox" id="checkBox2"><label for="checkBox2">checkBox2</label></div>
</div>
<div class="group">
<h2>Group 2</h2>
<div class="checkBox"><input type="checkBox" id="checkBox3"><label for="checkBox3">checkBox3 abcdabcdabcd abcdabcdabcdabcd</label></div>
<div class="checkBox"><input type="checkBox" id="checkBox4"><label for="checkBox4">checkBox4 abcdabcdabcd</label></div>
</div>
无论如何要实施它吗? (不能设置固定值,文字长度是动态的)
解决方法
您应该将 width: fit-content
分配给父容器,而不是子容器。
此外,为了更好的可视化,我将所有内联样式更改为外部样式:
.group {
display: flex;
flex-direction: column;
width: fit-content;
}
.input-group {
border: 2px solid red;
border-radius: 6px;
}
<div class="group">
<h2>Group 1</h2>
<div class="input-group">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">checkbox1 super super long texttexttexttexttexttexttexttexttexttext</label>
</div>
<div class="input-group">
<input type="checkbox" id="checkbox2" />
<label for="checkbox2">checkbox2</label>
</div>
</div>
<div class="group">
<h2>Group 2</h2>
<div class="input-group">
<input type="checkbox" id="checkbox3" />
<label for="checkbox3">checkbox3 abcdabcdabcd abcdabcdabcdabcd</label>
</div>
<div class="input-group">
<input type="checkbox" id="checkbox4" />
<label for="checkbox4">checkbox4 abcdabcdabcd</label>
</div>
</div>