如何将 DOM 元素放在右上角

Question

这段代码有效，但我想知道这是否是将 dom 元素放置在容器右上角的最佳方式。

先决条件如下：
1） DOM 无法更改。
2）带有原始代码注释的CSS代码无法更改。

演示：http://jsfiddle.net/jBme9/1/

---

<div class="control-group">
    <div class="controls">
        <div class="prize-item">
            <div class="control-group ">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="form-prize-item-name" value="prize2">
                </div>
            </div>
        </div>
        <button type="button" class="btn" data-toggle="collapse" data-target="">
            Edit
        </button>
    </div> 
</div>

---

.controls button{
    float: right;
    position:absolute;
    top:0px;
    right: 0px;
}
/* original code */
.control-group {
    background-color: #D9EDF7;
    padding: 13px;
    margin-bottom: 20px;
}
/* original code */
input {
    box-sizing: border-box;
    height: auto;
    padding: 8px 4px;
    width: 100%;
}
​

Answer 1

你可以

简单地做你已经做过的事情，但是如果你想把它放在网页中间的某个地方，你需要有一个带有position: relative;的外部div

首先，您不需要：

1） float: right; /* In .controls button */

2）你有一个名为.btn这样你就不需要.controls按钮，只需使用.btn否则你的样式将应用于.controls中的所有按钮

3）按钮不需要type=button属性...（除非您不使用它来重置/提交您需要指定的任何内容）

我的小提琴

Answer 2

看起来不错。但你不需要float:right行。 position:absolute会的。

Answer 3

您的绝对定位元素（按钮）需要上下文来实现其绝对定位，这可以通过使用 position： relative 声明它的父元素来完成。如果不这样做，按钮将绝对相对于最外层的父元素（即 html 标记）定位。

此外，您的CSS还有一个冗余属性，即浮点数。绝对定位时不需要浮子。

这就是您所需要的：

position: absolute;
top: 0;
right: 0;

Answer 4

你可以像

input[type="button"]
{
float:right;
}
input[type="text"]
{
float:right;
}
or
input[type="text"], input[type="button"]
{
float:right;
}