html - 浮动自动生成的 HTML

Question

我有以下自动生成的 HTML，我无法更改。此 HTML 在字段em之前显示消息input，但是我需要将其移动到输入字段的右侧。

我试过使用 float 到em，但它不起作用。我会很感激任何帮助。

<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>

Answer 1

CSS Only 解决方案（我不推荐，但可以）

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.";
}

​您只需要声明:after内容，nth-child并且需要具体了解您要替换的内容。

这是一个 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;
}​

Answer 2

尝试类似：

​label {
    float:left;
}
em {
    float: right;
}
input {
    float:left;
}

虽然这会将 放在em父容器的最右边。考虑到它在一个表格中，它可能会按原样工作，除非我们拥有带有开始表格标签的完整 HTML 等，否则无法测试。

Answer 3

如果您无法做到这一点，请
在
用户单击提交按钮而不输入电子邮件或输入的电子邮件格式错误，将无法提交表单并显示错误。