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;
}

第二个选项：

将按钮放入<p>标签中

演示http://jsfiddle.net/kevinPHPkevin/ZBZZU/2/