Question

如果你想看一下，那就是onceuponatheme2.tumblr.com。下面是它的CSS。我试图让底部的图标从右边开始是5px，但仍然看起来好像它位于noticebox div周围的双边框顶部。

#noticebox{
    position:fixed;
    width:200px; /*width*/
    z-index:99999999999999999999;
    height:auto;
    left:90px; /*how far from the right*/
    top:90px; /*how far from the top*/
    color:#000000; /*text colour*/
    background-color:#ffffff; /*background colour*/
    border:1px solid #000000; /*border width and colour*/
    border-width:3px;   
    border-style:double;
    text-align:center; /*text align*/
    padding:5px;
    padding-bottom:10px;
}
#noticebox a{
    text-decoration:none;
    font-style:italic; /*italic links before hover*/
    letter-spacing:1px; /*distance between letters*/
}
#noticebox a:hover{
    font-style:normal;
    text-decoration:underline;
}
#blogtitle{
    font-size:20px;
    margin-left:5px;
    margin-top:-25px;
    padding-left:3px;
    padding-right:3px;
    padding-top:5px;
    padding-bottom:5px;
    font-family: 'Berkshire Swash', cursive;
    text-transform:none;
    letter-spacing:3px;
    background:{color:background};
    color:{color:text};
    position:absolute;
}
#description{
    padding-top:5px;
    padding-bottom:5px;
}
#links{
    width:120px;
    padding-top:5px;
    padding-left:3px;
    padding-bottom:5px;
    margin-bottom:-25px;
    margin-right:5px;
    background:{color:background};
    position:relative;
}
#links a{
    color:{color:text};
}

Answer 1

为#links将position:relative更改为position:absolute，然后添加right: 5px;然后您可以删除margin-right: 5px

Answer 2

您需要在#links类

中添加此样式

float: right;

Answer 3

你在#links内写的CSS非常好。您需要添加的内容是left:60px中的#links。我的个人建议是减少float财产的使用。所以最后你#links看起来像，

#links { width:120px; padding-top:5px; padding-left:3px; padding-bottom:5px; margin-bottom:-25px; margin-right:5px; background:{color:background}; position:relative; left: 60px; }

您可以通过调整left值来调整div。

希望这能解决您的问题。

在css上的保证金权利在我的div中不起作用

3 个答案: