Question

我有两组复选框，每个复选框在鼠标悬停时都有一个“环”（我只是在下面的代码中简化了这一点，环直接显示，无论如何它不是那么重要。）

问题是我需要保持所有复选框行的宽度相同，宽度也应该适应最长的文本，所以所有的“环”看起来都一样。（在这种情况下，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>

无论如何要实施它吗？（不能设置固定值，文字长度是动态的）

Answer 1

您应该将 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>

如何设置所有flex元素宽度相同，适应最长文本？

1 个答案: