html - 当我在 % 中添加 margin-left 时，span 返回到该行

Question

我尝试将 margin-left 以百分比形式添加到跨度中，但结果并不如我所愿。仅当我将 Bootstrap 添加到标签的属性显示更改为 block 时，它才有效，任何人都可以向我解释这种行为并提供解决方案吗？提前致谢。

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.field-description {
    margin-left: 20%;
}

<label class="gender-item">
  <input type="radio" id="male" class="field-checkbox" name="gender" value="">
  <span class="field-description">male</span>
</label>

Answer 1

相对于没有明确定义维度的行内 block 的百分比值可能会导致奇怪的问题，要么避免使用百分比单位，要么你可以强制内容保留在一行中 white-space : nowrap;

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    white-space: nowrap;
}
.field-description {
    margin-left: 20%;
}

<label class="gender-item">
  <input type="radio" id="male" class="field-checkbox" name="gender" value="">
  <span class="field-description">male</span>
</label>