Html 将按钮放入 div 框内的右上角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18750803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:18:15 来源:igfitidea点击:
Getting the button into the top right corner inside the div box
提问by John Smith
I can't figure out how to get the [X] button into the top right corner of my custom css box.
我不知道如何将 [X] 按钮放入自定义 css 框的右上角。
Here's the result so far:
这是到目前为止的结果：
#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;
}<div id="wrapper">
<div id="container">
<div id="titlebar">Information Box</div>
<div><input id="button" type="button" value="X"></div>
</div>
</div>回答by j08691
Just add position:absolute; top:0; right:0;to the CSS for your button.
只需将position:absolute; top:0; right:0;按钮添加到 CSS 中即可。
#button {
line-height: 12px;
width: 18px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
}
回答by user2331662
#button {
line-height: 12px;
width: 18px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position: absolute;
top: 0;
right: 0;
}
