Question

我正在尝试将关闭按钮的位置设置在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;
}

Answer 1

工作小提琴： 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，那么您对此非常满意。

Answer 2

我刚改变了一些东西，看看

#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/

使用CSS在DIV上放置关闭按钮

2 个答案: