表單提交按鈕位置，固定/絕對

我有意見，從我的數據庫迴應到他們自己的包含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(); 
});

來源

2014-02-16 Lovelock

請在這裏的問題，發佈您的代碼。如果jsFiddle發生故障或出於某種其他原因，鏈接的目標更改了內容，則您的問題將不再具有與其關聯的代碼。 –

編輯:)謝謝。 – Lovelock

這對我來說看起來不錯......不確定我是否明白你的觀點，我不會改變目前的表象。但是，你想要這些按鈕的準確位置？ – sinisake

簡單的設置容器的位置相對，並形成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/

來源

2014-02-16 23:11:59 sinisake

表單提交按鈕位置，固定/絕對

回答

相關問題