在右上角顯示p標籤

Question

我試圖在右上角顯示帶count-names類的p標籤。我不想用margin-top: -20px。有沒有其他適當的方法可以將它放在我想要顯示的位置？

這裏是我的代碼code here

HTML代碼

<p>First name: <input id="name" /></p> 
<p>First name capitalized: <strong>NAME</strong></p> 
<p class="count-names">1</p>​ 

CSS代碼

.count-names { 
    float: right; 
    top: 0; 
}​ 

Answer 1

你去那裏：

http://jsfiddle.net/yRNTy/2/

HTML：

<p>First name: <input id="name" /></p> 
     <p>First name capitalized: <strong>NAME</strong></p> 
<p class="count-names">1</p> 

CSS：

.count-names { 
    position:absolute; 
    top: 0; 
    right:0; 
    padding:3px; 
} 

Answer 2

把你p標記你的代碼的其餘部分之前，像這樣：

http://jsfiddle.net/yRNTy/3

Answer 3

使用此代碼：

HTML：

<p>First name: <input id="name" /></p> 
<p>First name capitalized: <strong>NAME</strong></p> 
<p class="count-names">1</p> 

CSS：

.count-names { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

position: absolute裝置位置的元素的絕對到文檔，獨立於任何其他元件。

top和right是非常明顯的，它們設置文檔的頂部和右側位置。

參考：position - MDN。

See an example。

這是我在本例中使用的實際CSS（只是爲了使它看起來不錯）：

.count-names { 
    position: absolute; 
    top: 0; 
    right: 0; 
    background: #eee; 
    margin: 10px; 
    padding: 10px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
}