浮动自动生成的HTML

时间:2012-08-19 17:28:39

标签: html css html-table

我有以下自动生成的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>

3 个答案:

答案 0 :(得分:2)

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;
}​

答案 1 :(得分:0)

尝试类似:

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

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

答案 2 :(得分:0)

如果您无法做到,请在输入字段中对电子邮件使用HTML5验证
&lt; input type =&#34; email&#34; title =&#34;以正确的格式输入电子邮件&#34;需要=&#34;真&#34; /&GT;
每当用户点击提交按钮而不输入电子邮件或以错误的格式输入电子邮件时,表单将不会被提交并且将显示错误。