html - p 要素に CSS ボタンを重ねる

Question

ボタンを要素の上に配置し、要素の右側に浮かせようとしています<p>。

これが私の試みです： http://jsfiddle.net/ZBZZU/

HTML

<p id="hello"><strong>Hello</strong></p>
<button id="button">Button</button>

CSS

#hello {
    text-align:center;
    font-size:20px;
    border:solid 2px;
    border-color:black;
    color:white;
    background-color:red;
    margin:2px;
}

#button {
    display:inline;
    float:right;
}

Answer 1

ボタンを p 要素の子にして、絶対に配置する必要があります

HTML

<p id="hello">
    <strong>Hello</strong>
    <button id="button">Button</button>
</p>

CSS

#hello {
    position: relative;
}

#button {
    position: absolute;
    right:0;
}

Answer 2

あなたが必要position: absolute

デモhttp://jsfiddle.net/kevinPHPkevin/ZBZZU/1/

#button {
    display:inline;
    position: absolute;
    top: 12px;
    right: 15px;
}

2 番目のオプション:

ボタンを<p>タグに入れる

デモhttp://jsfiddle.net/kevinPHPkevin/ZBZZU/2/