html - 右上隅にphtmlタグを表示します

Question

右上隅にcount-namesクラスのapタグを表示しようとしています。使いたくないmargin-top: -20px。表示したい場所に配置する他の適切な方法はありますか？

これが私のコードコードです

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

次のコードを使用します。

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右の位置を設定します。

参照:位置 - MDN .

例を参照してください。

この例で使用した実際の 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;
}

Answer 3

p次のように、コードの残りの部分の前にタグを配置します。

http://jsfiddle.net/yRNTy/3