0

我正在尝试将关闭按钮的位置设置在 div 上，但无法将其移至右上角。我已经阅读了许多与此相关的 Stack 文章，但无法使其正常工作。

有人可以提供帮助吗？

http://jsfiddle.net/grantfeldman/K4p6g/1

<div class="tag">
    <a class="closeButton"></a>
    Foo
</div>

div.tag
{
    color: #EEE;
    font-size: 15px;
    font-family: Georgia, Times, serif;
    display: inline-block;
    border: 2px solid #324566;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: #283957;
    padding: 8px;
    margin: 5px;
}
.closeButton
{
    display:block;
    float:right;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
4

2 回答 2

4

工作小提琴：http: //jsfiddle.net/K4p6g/2/

需要的改变：

#divMyTags div.existingTag
{
    position: relative;
}

.closeButton
{
    display:block;
    position:absolute;
    top:-10px;
    right:-10px;
}

这绝对定位关闭按钮相对于其父级。

快速更新您评论中的另一个要求：http: //jsfiddle.net/K4p6g/5/

请注意，它是使用 jQuery 进行的快速更新，但它应该会给您一些想法。如果你已经在你的项目中使用了 jQuery，那么你就很好了。

于 2013-06-10T23:26:26.327 回答
1

我只是改变了一些东西，看看

#divMyTags div.existingTag
{
    color: #EEE;
    font-size: 15px;
    font-family: Georgia, Times, serif;
    display: inline-block;
    border: 2px solid #324566;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: #283957;
    **padding: 0px**;
    margin: 5px;
}
**#divMyTags .theText
{
    margin:10px;
}**

此处更新来源：http: //jsfiddle.net/K4p6g/4/

于 2013-06-10T23:31:06.867 回答