帮助与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; 
}