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

使用此代码：

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

Answer 3

将p标记放在代码的其余部分之前，如下所示：

http://jsfiddle.net/yRNTy/3

在右上角显示p html标签

3 个答案: