0

我正在尝试在右上角显示带有 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;
}​
4

3 回答 3

2

你去：

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;
}
于 2012-07-15T05:24:53.490 回答
1

使用此代码：

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;
}
于 2012-07-15T05:28:00.380 回答
0

将您的p标签放在其余代码之前，如下所示：

http://jsfiddle.net/yRNTy/3

于 2012-07-15T05:25:01.583 回答