Question

我试图在我的真实代码中尝试使用JSFiddle在https://jsfiddle.net/tekknow/8qj99bkt/13/完成的工作我想让div从右边动画。因为css设置为内联块，所以它应该紧跟在文本字段之后。但不幸的是，我的真实代码使用struts标记lib来干扰这种行为。查看页面源代码我可以看到struts将标签和密码字段放在表格中。因此div最终在两个tr块之间，导致div出现在表单上方而不是右侧。

HTML

 <s:password label="New Password" name="NewPwd" class="infoReset" id="pwd"/>
    <div id="rules">
        1 upper case letter<br>
        1 lower case letter<br>
        1 special char among !@#$%^&*_=+-/<br>
        8 char length
    </div>

struts对它做了什么：

    <tr>
    <td class="tdLabel"><label for="pwd" class="label">New Password:</label></td>
    <td><input type="password" name="NewPwd" id="pwd" /></td>
    </tr>

    <div id="rules">
        1 upper case letter<br>
        1 lower case letter<br>
        1 special char among !@#$%^&*_=+-/<br>
        8 char length
    </div>
    <tr>

即使用js定位div也没有任何影响

的Javascript

    $(document).ready(function(){
        $('#pwd').focus(function() {
            $('#rules').css({left: '870px', top: '280px'});
            $('#rules').show('slide', {direction: 'right'}, 500);
        });

CSS

#rules { 
    display: inline-block;
    background: #fff;
    border: 2px solid grey;
    width: 260px;
    position: 'fixed';
    box-shadow: 5px 5px 5px #888888;
    border-radius: 5px;
    padding-left: 10px;
    text-align: left;
}

我尝试过绝对，相对和固定的位置。没有不同。有什么建议吗？

struts标签lib阻止定位div

0 个答案: