我试图在div的右侧有一个关闭按钮,但比div高一点。如下图所示:
在搜索了一下后,我发现了以下相关问题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)。
答案 0 :(得分:2)
检查jsFiddle
position:relative;
margin-top:-15px;
答案 1 :(得分:1)
在这种情况下,您可以使用 line-height
。
.close{
float:right;
cursor: pointer;
font-weight: bold;
line-height: 2px;
}
答案 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;
}
答案 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;
}