[英]Help with CSS positioning
這是我的頁面: 鏈接
從屏幕截圖中可以看到,圖標(紅色圓圈)未與其上方的圖標對齊(單擊標題以將其展開)。 替代文字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;
}
我想將div“ c”移到右側,而不用圖標替換用戶面板。
問題是您將寬度設置為其容器的92%,然后在其上添加52px的填充。 這就是這樣的布局:
|26px| LEVEL 1 |
| | 92% |
| 52px | LEVEL 2 |
| | 92% |
當圖標向右對齊時,它們將隨着右邊緣的進一步偏移而偏移。 我建議不要設置div的寬度,而要使用邊距對齊它們,如下所示:
|26px| LEVEL 1 |
| | |
| 52px | LVL2 |
| | |
作為調試這類問題的技巧,請在所有不同顏色的物體上加上邊框。 當您“看到”它時,這可能會使發生的事情更加明顯。
您可以輕松地做到這一點。
<div class="commentcontainer">
......
<div class="updown">....</div>
......
</div>
style :
.commentcontainer{position:relative;}
.commentcontainer .updown {position:absolute; top:20px; right:20px;}
這應該工作。 抱歉,我使用了其他課程。.主要思想是:put position:relative; 在注釋框的css中並放置position:absolute; 頂部:20像素; 右:20像素; 在上/下投票的CSS中,這應將您的上/下投票img在所有評論中都放在同一位置。
或者,如果這不起作用,則應檢查注釋框的寬度(如果它具有定義的值)。 希望能幫助到你
在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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.