如何放置在右上角

这段代码工作的DOM元素，但我想知道，如果它是将一个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%; 
}

来源

2012-10-04 Lorraine Bernard

你可以简单地做你做了什么，但如果你想放置在您的网页中间的那个地方，你需要有一个外div与position: relative;

首先，你不会需要的所有东西：

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

2）你有一个类叫。 btn所以你不需要.controls按钮只需使用.btn否则你的样式将应用到所有按钮.controls

3）按钮不需要type=button属性...（除非你不使用它重置/比你需要指定提交任何东西）

My Fiddle

来源

2012-10-04 08:05:49

感谢你的答案和您的建议了。 –

@LorraineBernard欢迎你:) –

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

来源

2012-10-04 08:05:08

你绝对定位的元素（按钮）需要为它的绝对定位方面，这可以通过声明它与PO父元素来完成sition：相对的。如果你不这样做，该按钮将被绝对相对于最外层的父元素定位，即HTML标签。

而且你的CSS具有冗余特性，浮子。绝对定位时不需要浮动。

这就是你需要：

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

来源

2012-10-04 08:09:18

可以使元素类像

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

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

来源

2012-10-04 09:27:55

如何放置在右上角

回答

相关问题