单选按钮的垂直间距不均匀

Question

有没有办法让单选按钮之间的垂直间距均匀？如果你看图片，你会发现垂直间距不均匀，这让我很痛苦。我认为这是因为上标，所以我将每个按钮结构都放在 div 中，并使用 CSS 将那些 div 的高度设置为很大。 div 多高并不重要。它们确实垂直分布，但仍然不均匀 spaced（就像二次方和逆之间的狭窄 space 总是比其他任何东西都窄）。

.mathClass {
  font-family: serif;
  font-weight: 500;
  font-size: 110%;
  margin: 0;
  padding: none;
}

.radioClass {
  display: block;
  position: relative;
  padding-left: 20px;
  padding-top: 0;
  padding-bottom: 0 margin: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radioMark {
  position: absolute;
  bottom: 4px;
  left: 0;
  height: 12px;
  width: 12px;
  background-color: #D0D0D0;
  border-radius: 50%;
  border: 1px solid #4C6A94;
}

Models:
<form>
  <label class="radioClass"> None
            <input type="radio" onclick="computeAll()" name="usefit" id="fitNone" checked>
            <span class="radioMark"></span>
            </label>
  <label class="radioClass">  Exactly Proportional&#8239;:&nbsp&nbsp; <i class="mathClass">y = x</i>
            <input type="radio" class="radioClass" onclick="computeAll()" name="usefit" id="yEqualsX">
            <span class="radioMark"></span>
            </label>
  <label class="radioClass">  Proportional&#8239;:&nbsp&nbsp; <i class="mathClass">y = Ax</i>
            <input type="radio" class="radioClass" onclick="computeAll()" name="usefit" id="yEqualsAX">
            <span class="radioMark"></span>
            </label>
  <label class="radioClass"> Linear&#8239;:&nbsp;&nbsp;  <i class="mathClass">y = Ax + B </i>
            <input type="radio" onclick="computeAll()" name="usefit" id="fitLinear">
            <span class="radioMark"></span>
            </label>
  <label class="radioClass"> Square Law&#8239;:&nbsp;&nbsp;  <i class="mathClass">y = Ax<sup>2</sup></i>
            <input type="radio" onclick="computeAll()" name="usefit" id="fitSquare">
            <span class="radioMark"></span>
            </label>
  <label class="radioClass"> Quadratic&#8239;:&nbsp&nbsp;  <i class="mathClass">y = Ax<sup>2</sup> + Bx + C</i>
            <input type="radio" onclick="computeAll()" name="usefit" id="fitQuadratic">
            <span class="radioMark"></span>
            </label>
  <label class="radioClass"> Inverse&#8239;:&nbsp&nbsp; <i class="mathClass">y = A/x</i>
            <input type="radio" onclick="computeAll()" name="usefit" id="fitInverse">
            <span class="radioMark"></span>
            </label>
  <label class="radioClass"> Inverse Square&#8239;:&nbsp&nbsp; <i class="mathClass">y = A/x<sup>2</sup></i>
            <input type="radio" onclick="computeAll()" name="usefit" id="fitInverseSquare">
            <span class="radioMark"></span>
            </label>

Answer 1

我想出了如何使线条间距均匀的方法。通过仔细检查页面，我发现如果标签包含带有上标的文本，则会向标签添加额外的 4 像素垂直填充。将每个标签置于固定高度 div 并没有帮助，因为填充仍然会在 div.

内移动标签

（完全和完全不优雅的）修复是手动向不包含上标的标签添加 4 个像素的顶部填充。我在 HTML 中使用 style= 执行此操作，因为 CSS 中有很多与单选按钮样式相关的单独条目。为带有和不带上标标签的单选按钮创建单独的类并复制所有 CSS 看起来很愚蠢。

单选按钮的垂直间距不均匀

uneven vertical spacing of radio buttons

html

css

radio-button