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

【问题标题】：Form submit button positing, fixed / absolute表单提交按钮位置，固定/绝对
【发布时间】：2014-02-16 22:51:24
【问题描述】：

我的 cmets 从我的数据库中回显到它们自己的包含 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();
});

【问题讨论】：

请在问题中发布您的代码。如果 jsFiddle 出现故障或由于某些其他原因，您的链接目标更改了内容，您的问题将不再有与之关联的代码。
这对我来说看起来不错...不确定我明白你的意思，我不会改变当前的外观。但是，您究竟想要这些按钮在哪里？
按钮需要总是让我们说：从右边2px，从顶部2px。一直固定在那个位置。但目前，它们位于评论内容的下方。我试过给他们一个固定的位置，但他们没有显示在 div...
类似这样的东西：jsfiddle.net/qzj49/1?
嗨！输入按钮submit-report不应该在form标签内吗？

标签： jquery css forms button css-position

【解决方案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/

【讨论】：