Question

我的评论从我的数据库回显到他们自己的包含div。

在这个div中，我有一个包含报告和/或删除按钮的“隐藏”表单。

当悬停评论时，会显示表单，它只显示两个按钮。

这很好用。但是我想要的是按钮形式总是在同一个地方。

如果评论文字很短，那么它就会出现，但只要评论超过1行，div就会位于内容的下方。

我只想把它固定在同一个地方，每个评论div中。无论有多少行等等。

这是一个小提琴，显示了我的意思的基本例子：

http://jsfiddle.net/qzj49/

我只需要修复按钮的表单，并显示在评论的文本上。

代码只是加入：

CSS：

.textcomment {
    color: #666; width: 98%; 
    padding-left: 1%; 
    padding-right: 1%; 
    font-size: 12px; 
    padding-bottom: 1%; 
    padding-top: 1%; 
    border-bottom: 1px solid #ccc;
}

.textcomment:hover {background-color: #efefef;}
.nocomments {
    width: 100%; 
    color: #888; 
    font-size: 12px; 
    padding-bottom: 1%; 
    padding-top: 1%;
}

.commentActionButton {
display: none;
top: 0;
float:right;
width: 14%;
z-index: 999;
}

.delrepcomment {}

.deletecommentsubmit {
background-color: #F00;
border: none;
color: #fff;
opacity: 0.4;
float:right;
width: 48%;
margin-right: 0%;
padding: 2%;
}

.reportcommentsubmit {
background-color: #F90;
border: none;
color: #fff;
opacity: 0.4;
float:right;
width: 48%;
margin-right: 4%;
padding: 2%;
}

.reportcommentsubmit:hover, .deletecommentsubmit:hover {
opacity: 0.9;
cursor: pointer;
}

HTML：

<div class='textcomment'>
    <a class='userights1'>Username:</a>&nbsp;
    This is a comment
    <div class='commentActionButton'>
        <form action='#' method='post' class='delrepcomment'> 
            <input type='hidden' name='delcommentid'>
            <input type='hidden' name='postowner'>
            <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'>

        </form> 
        <input class='reportcommentsubmit' name='submit-report' type='submit' value='report'> 
    </div>
</div>

<div class='textcomment'>
    <a class='userights1'>Username:</a>&nbsp;
    This is a comment that extends to more than 1 line long... This is a comment that extends to more than 1 line long... 
    <div class='commentActionButton'>
        <form action='#' method='post' class='delrepcomment'> 
            <input type='hidden' name='delcommentid'>
            <input type='hidden' name='postowner'>
            <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'>
        </form> 
        <input class='reportcommentsubmit' name='submit-report' type='submit' value='report'> 
    </div>
</div>

<div class='textcomment'>
    <a class='userights1'>Username:</a>&nbsp;
    This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... 
    <div class='commentActionButton'>
        <form action='#' method='post' class='delrepcomment'> 
            <input type='hidden' name='delcommentid'>
            <input type='hidden' name='postowner'>
            <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'>
        </form> 
        <input class='reportcommentsubmit' name='submit-report' type='submit' value='report'> 
    </div>
</div>

jQuery的：

// Show the delete / report comment on hover
$(".textcomment").hover(function() {
    var $this = $(this);       
    $(this).closest('.textcomment').find('.commentActionButton').toggle();
});

Answer 1

将容器位置简单设置为相对位置，并将div位置形成绝对位置：

.textcomment {color: #666; width: 98%; padding-left: 1%; padding-right: 1%; font-size: 12px; padding-bottom: 1%; padding-top: 1%; border-bottom: 1px solid #ccc;position:relative;}
.textcomment:hover {background-color: #efefef;}
.nocomments {width: 100%; color: #888; font-size: 12px; padding-bottom: 1%; padding-top: 1%;}

.commentActionButton {
    display: none;
    top: 0;
    right:0;
    position:absolute;
    width: 14%;
    z-index: 999;
}

http://jsfiddle.net/qzj49/1/

表单提交按钮位置，固定/绝对

1 个答案: