css - 如何在右上角放置一个 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

看起来不错。但是你不需要float:right线。position:absolute会做。

Answer 2

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

首先你不需要的东西：

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

2）你有一个名为 . btn所以你不需要.controls 按钮简单地使用.btn，否则你的样式将应用于所有按钮.controls

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

我的小提琴

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;
}