幫助與CSS定位

Question

這是我的網頁： link

正如你可以在截圖中看到，圖標（紅圈）不與它上面的圖標（點擊標題展開它）對齊。 alt text http://img338.imageshack.us/img338/1390/35070527.jpg

的CSS：

body 
{ 
    font-family: arial, helvetica, sans-Serif; 
} 


#talkbacks .noshow 
{ 
    overflow:hidden; 
    clear:both; 
    padding: 2px 10px; 

} 


#talkbacks ul.top 
{ 
    border: solid 1px #fff; 
    margin: 0 -1px; 
} 

#talkbacks li 
{ 
    width: 100%; 
    /*margin-top: 5px;*/ 
} 
/* 
#talkbacks ul 
{ 

    clear: both; 
}*/ 



.n 
{ 
    color: #758888; 
    float: left; 
    font-size: 12px; 
    padding-right: 8px; 
    line-height: 15px; 
    width:15px; 
} 


.c 
{ 
    float: left; 
    /*width: 400px; */ 
    width:92%; 
    margin-top: 0px; 
    margin-right:5px; 

} 

.d 
{ 
    font-weight: bold; 
    color: #758888; 
    font-size: 12px; 
    line-height: 15px; 
    margin: 0; 
    padding: 0; 
} 


ul 
{ 
    list-style-image: none; 
    list-style-position: outside; 
    list-style-type: none; 
    padding-left:0px; 
    margin-left:0px; 
    margin-top:5px; 
    margin-bottom:5px; 
    clear:both; 
} 
a 
{ 
    font-size: 12px; 
    line-height: 15px; 
    font-weight: bold; 

} 

a:link, a:visited 
{ 
    color: #284D99; 
    text-decoration: none; 
    outline: none; 
} 
a:hover, a:active 
{ 
    text-decoration: underline; 
} 


li ul li div.c 
{ 
    padding-left: 26px; 
} 
li ul li ul li div.c 
{ 
    padding-left: 52px; 

} 
li ul li ul li ul li div.c 
{ 
    padding-left: 77px; 
} 
li ul li ul li ul li ul li div.c 
{ 
    padding-left: 104px; 
} 

#talkbacks .noshow .userpanel 
{ 
    display: none; 
} 

#talkbacks .noshow .adminpanel 
{ 
    display:none; 
} 
#talkbacks .noshow div.CommentBody, .show div.CommentBody p 
{ 
    display: none; 

} 

/*************** Show Comment **********************/ 
#talkbacks .show 
{ 
    background: #F3F3F3 none repeat scroll 0 0; 
    border-bottom: 1px solid #B6C7C7; 
    border-top: 1px solid #B6C7C7; 
    display: table; 
    font-size: 12px; 

    padding: 11px 10px; 
    width: 439px; 

} 
/*#talkbacks .show p 
{ 
    font-size: 1em; 
}*/ 
#talkbacks .show div.CommentBody, .show div.CommentBody p 
{ 
    display: block; 
    margin: 1.5px 0 0 0; 
    font-size: 12px; 
} 
#talkbacks .show .userpanel 
{ 

    margin-top: 10px; 

    display:block; 
} 


#talkbacks .show .userpanel .votes div.voteResult 
{ 
    background-color: #FFFFFF; 
    border: 1px solid #EBEBEB; 
    color: #555555; 
    float:left; 
    font-weight: bold; 
    padding: 0 4px; 
    font-size: 11px; 
} 
#talkbacks .show .userpanel div.reply 
{ 
    float:left; 
} 

#talkbacks .show .userpanel .votes div.buttons 
{ 
    float:left; 

} 

/*************************** Add new comment **********************************/ 
#NewComment .textBox 
{ 
    border: 1px Solid #002080; 
    overflow:auto; 
} 
.linka 
{ 
    cursor: pointer; 
    cursor: hand; 
} 

有問題的部分是一個（我認爲）：

li ul li div.c 
{ 
    padding-left: 26px; 
} 
li ul li ul li div.c 
{ 
    padding-left: 52px; 

} 

我想移動格 「C」，在右邊不轉換法的用戶面板與圖標。

Answer 1

你可以這樣做一個簡單的方法。

<div class="commentcontainer"> 
...... 
<div class="updown">....</div> 
...... 
</div> 

style : 

.commentcontainer{position:relative;} 
.commentcontainer .updown {position:absolute; top:20px; right:20px;} 

這應該工作。對不起，我用其他類和東西.. 主要的ideea是：把位置：相對;在評論框的CSS中放置位置：絕對;頂部：20像素;右：20像素;在上/下投票的CSS這應該把你的上/下投票img`s在同一個地方在所有評論。

或者，如果這不工作，你應該檢查commentbox`s的寬度，如果它有一個定義的值..嘗試把：寬度：100％; 希望它可以幫助

Answer 2

問題是你將寬度設置爲其容器的92％，然後在其上添加52px的填充。這是使這樣的佈局：

|26px| LEVEL 1 | 
| | 92% | 

| 52px | LEVEL 2 | 
|  | 92% | 

由於圖標對齊到右側，他們現在偏移，因爲右邊緣進一步跨越。我建議不設置div的寬度，而不是使用利潤率對準他們，這樣的事：

|26px| LEVEL 1 | 
| |   | 

| 52px | LVL2 | 
|  |  | 

有一個小竅門來調試這些類型的問題，把邊界上不同顏色的一切。這可能會讓你看到的情況更加明顯。

Answer 3

在FF3測試

#talkbacks .show 
{ 
    -moz-background-clip:border; 
    -moz-background-inline-policy:continuous; 
    -moz-background-origin:padding; 
    background:#F3F3F3 none repeat scroll 0 0; 
    border-bottom:1px solid #B6C7C7; 
    border-top:1px solid #B6C7C7; 
    font-size:12px; 
    overflow:hidden; 
    padding:11px 10px; 
    position:relative; 
    width:439px; 
} 

div.votes 
{ 
    float:none !important; 
    position:absolute; 
    right:20px; 
}