当我在%中添加页边距时，span返回到行

Question

我尝试在span中添加margin-left的百分比，但结果不是我想要的那样。只有当我将通过引导程序添加到标签中的属性显示更改为阻止时，有人能向我解释这种行为并提供解决方案吗？提前谢谢。

​

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

相对于没有明确定义维度的内联块，百分比值可能会导致奇怪的问题，要么避免使用百分比单位，要么强迫内容与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>

​

Answer 2

我想你想让span成为内联Check here单击此处