html - 如何在CSS中移动单选按钮

Question

我正在尝试使用定位来移动我的单选按钮，但它似乎不起作用。我为每个单选选项添加了一个 id 并尝试以这种方式设置它的样式。整个事情都在一个叫做 ticket 的类中……

我已经在输入中添加了一个 id，但它不起作用:

echo '<tr><th>Has this been Resolved?</th><td><input type="radio" name="resolve" value="Yes" id="yes">Yes<input type="radio" name="resolve"  value="No" id="no">No</td></tr>
    <tr><th></th><td><textarea name="reply"></textarea></tr></td>
    <tr><th>Add Reply/Message</th><td><input type="submit" name="submit" value="Reply"></tr></td>

这是我的 CSS:

.ticket input[type="radio"] {
    position: relative;
    right: 55em;
}

Answer 1

首先，您的 HTML 有点乱。其次，不要使用表格来定位元素。表格是为充满数据的表格准备的——至少从 1998 年左右开始是这样。使用 div 和 span 元素。

轻松定位元素的方法具体需要三个步骤:

1. 将元素放在 div 中。
2. 将 div 的 position 设置为 relative。
3. 将所有元素的 position 设置为 absolute。

我在这里举了一个例子。

您会注意到我将您的单选按钮放在 span 元素中，并使用 CSS 定位它们。这允许标题与单选按钮一起定位；您定位 span 而不是 input 元素。如果您以 input 元素为目标，字幕将不会受到影响，并将保留在其默认位置。

此外，我只是使用了 first-child 和 last-child 作为选择器。如果愿意，您可以为每个人分配一个 ID，但我想我也会向您展示这个。

现在，您可以通过更改包含它们的 span 元素的 left 和 top 值来定位按钮。

#theRadios {
height: 100px;
position: relative;
}

#theRadios span {
position: absolute;
}

#theRadios span:first-child {
top: 10px;
left: 0;
}

#theRadios span:last-child {
top: 40px;
left: 0:
}

<div id="theHeader">Has this been Resolved?</div>
<div id="theRadios">
  <span><input type="radio" name="resolve" value="Yes" id="yes">Yes</span>
  <span><input type="radio" name="resolve" value="No" id="no">No</span>
</div>
<div>
  <textarea rows=4 cols=50 placeholder="Add Reply/Message"></textarea>
</div>
<div>
  <input type="submit" name="submit" value="Reply">
</div>