我有以下自动生成的 HTML，我无法更改。
此 HTML 在 input 字段之前以 em 显示消息，但我需要将其移至输入字段的右侧。
我试过对 em 使用 float right，但它不起作用。
我将不胜感激。
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
最佳答案
纯 CSS 解决方案(我不推荐，但有效)
jsfiddle:http://jsfiddle.net/rLhTs/
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="name_email" name="name_email">
</td>
</tr>
</table>
CSS:
.form-field:nth-child(1):after {
content:"Email is required.";
}
.form-field:nth-child(2):after {
content:"Name is required.";
}
您只需为 nth-child 声明 :after 内容，并且您需要明确知道要替换的内容。
这是一个 JavaScript 解决方案:
查看这个 jsFiddle:http://jsfiddle.net/E8dJ9/3/
我对其进行了扩展以向您展示它适用于任意数量的行。您可能需要根据您的实际具体用例稍微改进一下。
以及完整性代码:
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="user_name" name="user_name">
</td>
</tr>
</table>
JavaScript(使用 jQuery):
$('th[scope="row"]').each(function(index, value) {
var em = $(this).find('em').text();
$(this).parent().find('td').append('<em>' + em + '</em>');
});
CSS:
.form-field th em {
display: none;
}
关于html - float 自动生成的 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12028518/