我正在尝试使用定位来移动我的单选按钮,但它似乎不起作用。我为每个单选选项添加了一个 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;
}
最佳答案
首先,您的 HTML 有点乱。其次,不要使用表格来定位元素。表格是为充满数据的表格准备的——至少从 1998 年左右开始是这样。使用 div
和 span
元素。
轻松定位元素的方法具体需要三个步骤:
- 将元素放在
div
中。 - 将
div
的position
设置为relative
。 - 将所有元素的
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>
关于html - 如何在CSS中移动单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53975032/