폼 제출 버튼, 고정/절대

Question

내 DB에서 자신의 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를 :

절대에

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/