Question

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

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

<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，否则您的样式将应用于{{{}}中的所有按钮1}}

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

My Fiddle

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

如何在右上角放置DOM元素

4 个答案: