Question

我正在尝试通过定位来移动单选按钮，但似乎不起作用。我为每个单选选项添加了一个ID，并尝试以这种方式设置样式。整个过程都在一个叫票的课程中……

我已经在输入中添加了一个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元素。

轻松定位元素的方法特别需要三个步骤：

将元素放入div中。
将div的{{1}}设置为position。
将所有元素的relative设置为position。

我在这里举了一个例子。

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

此外，我只是使用input和first-child作为选择器。您可以根据需要为每个人分配一个ID，但我想我也会向您展示。

现在，您可以通过更改包含按钮的last-child元素的left和top值来放置按钮。

span

#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:
}

Answer 2

通过将元素偏移到可见空间之外来隐藏元素，对于看代码的其他人来说，很容易出错和偶然。

不过，您可以使用

等其他方式修复它

使用显示：无。
使用可见性：隐藏。
使用不透明度：0。
使用以下位置将其定位在屏幕上：绝对值和一个非常大的值像左：-9999px。

如何在css中移动单选按钮

2 个答案: