在右上角显示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; 
}