将按钮放到div框的右上角 [英] Getting the button into the top right corner inside the div box
本文介绍了将按钮放到div框的右上角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要你的帮助。
我无法为我的生活似乎能够计算出如何让[X]按钮进入我的自定义CSS框的右上角。
到目前为止的结果是：
这里是html：
<！DOCTYPE html>
< html>
< head>
< title>居中Div< / title>
< style>
#wrapper {
height：100px;
width：500px;
}
#wrapper {
bottom：50％;
右：50％;
位置：绝对;
}
#container {
background：#FFF;
剩下：50％;
padding：10px;
top：50％;
保证金：0;
padding：0;
身高：100％;
border：1px solid rgb（128,128,128）;
身高：100％;
职位：亲属;
}
＃inner1 {
height：100％;
border：1px纯蓝色;
}
＃inner2 {
height：100％;
border：1px纯绿色;
}
#titlebar {
cursor：pointer;
height：23px;
宽度：100％;
filter：progid：DXImageTransform.Microsoft.gradient（startColorStr =＃0A246A，endColorStr =＃A6CAF0，GradientType = 1）;
颜色：白色;
字体：13px arial，helvetica;
}
#button {
line-height：12px;
width：18px;
font-size：8pt;
font-family：tahoma;
margin-top：1px;
margin-right：2px;
}
< / style>
< / head>
< body>
< div id =wrapper>
< div id =container>
< div id =titlebar>资讯框< / div>
< div>< input id =buttontype =buttonvalue =X>< / div>
< / div>
< / div>
< / body>
< / html>
解决方案
只需添加 position：absolute ;顶部：0;右：0; 到您的按钮的CSS。
#button {
line -height：12px;
width：18px;
font-size：8pt;
font-family：tahoma;
margin-top：1px;
margin-right：2px;
位置：绝对;
top：0;
right：0;
}
I need your help.
I can't for the life of me seem to be able to figure as to how to get the [X] button into the top right corner of my custom css box.
Here's the result so far:
Here's the html:
<!DOCTYPE html>
<html>
<head>
<title>Centered Div</title>
<style>
#wrapper {
height: 100px;
width: 500px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#inner1 {
height: 100%;
border: 1px solid blue;
}
#inner2 {
height: 100%;
border: 1px solid green;
}
#titlebar {
cursor: pointer;
height: 23px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
font:13px arial,helvetica ;
}
#button {
line-height: 12px;
width: 18px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="titlebar">Information Box</div>
<div><input id="button" type="button" value="X"></div>
</div>
</div>
</body>
</html>
解决方案
Just add position:absolute; top:0; right:0; to the CSS for your button.
#button {
line-height: 12px;
width: 18px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
}
这篇关于将按钮放到div框的右上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
