将关闭按钮放在父div的右侧

时间:2014-03-06 04:51:45

标签: css

我试图在div的右侧有一个关闭按钮,但比div高一点。如下图所示:

enter image description here

在搜索了一下后,我发现了以下相关问题here,我尝试修改它以获得我想要的东西。

我的尝试可能是viewed on the fiddle

<div class="area">
    <span class="close">X</span>
    <div class="areaInside">some data</div>
</div>
.areaInside{
    border: 2px dashed #bbb;
    border-radius: 10px;
    color: #bbb;
    min-height: 80px;
}
.area{
    width:70%;
    height:100px;
}
.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
}

但显然它不能做我想要的。我希望关闭按钮位于区域上方,稍微向左侧。如何在不更改标记的情况下实现此目的(仅限css)。

6 个答案:

答案 0 :(得分:2)

检查jsFiddle

position:relative;
margin-top:-15px;

答案 1 :(得分:1)

在这种情况下,您可以使用 line-height

.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
    line-height: 2px;
}

Fiddle

答案 2 :(得分:1)

您可以使用positions

<强> Demo

.area{
    width:70%;
    height:100px;
    position:relative;
}
.close{
   position: absolute;
    right: 2px;
    top: -10px;
    cursor: pointer;
    font-weight: bold;
}

答案 3 :(得分:1)

试试这个:

.close {
float: right;
cursor: pointer;
font-weight: bold;
position: relative;
margin-top: -15px;
margin-right: 10px;
}

<强> DEMO

答案 4 :(得分:1)

.close {
float: right;
cursor: pointer;
font-weight: bold;
display: block;
margin-top: -17px;
margin-right: 8px;
background: red;
}

Updated Fiddle

答案 5 :(得分:1)

<强> See updated DEMO

使用位置概念使父属性相对和子属性绝对 现在,儿童css相对于父母工作

.areaInside{
    border: 2px dashed #bbb;
    -moz-border-radius: 10x;
    -webkit-border-radius: 10x;
    border-radius: 10px;
    color: #bbb;
    min-height: 80px;
    position:absolute;
    width: 100%;
}
.area{
    width:200px;
    height:100px;
    position:relative;
}
.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
    position: absolute;
   right: 2px;
   top: -14px;
}