重叠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

DEMO http://jsfiddle.net/kevinPHPkevin/ZBZZU/1/

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

第二个选项：

将按钮放在<p>标记

中

DEMO http://jsfiddle.net/kevinPHPkevin/ZBZZU/2/