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

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

首先你不需要的东西:

1) float :右；/* 在 .controls 按钮中 */

2) 你有一个名为 .btn 的类，所以你不需要 .controls button 只需使用 .btn 否则你的样式将适用于 .controls

中的所有按钮

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

My Fiddle