内容出现在div下方而不是其中

Answer 1

只需将

margin:0px

应用于

p

标签，就可以了 您的 div 高度很小，这就是文本由于默认边距

p

而掉落的原因

Answer 2

不是解决方案，只是清理意大利面。

首先，从标记中获取内联样式：

http://jsfiddle.net/uA94u/

现在更容易阅读代码了：

<div class="content">
  <p>Beta</p>  
</div>​

.content 
{ 
    top: 20px; 
    left: 110px; 
    position: absolute; 
    z-index: 3; 
    visibility: show;
    width: 45px;
    height: 15px;
    background:#FFFFFF;
    border:1px solid #E2943C;
}

p
{
    font-size:1em;
    color:#E2943C;
    font-face:Lucida Sans Unicode, Lucida Grande, sans-serif;
}

Answer 3

使用内联样式是一种过时的元素样式设置方式。我认为一些教程应该可以帮助您朝着正确的方向前进。

设置元素样式的方法是将 CSS（层叠样式表） 文件链接到文档或使用标签嵌入样式。

这是一个更被接受的版本：

http://jsfiddle.net/FvC9n/

如果您想要一些教程，请询问，我可以向您展示一些链接。

一个好的起点（如果您可以在没有视频的情况下应对）是http://www.w3schools.com/css/css_howto.asp它是针对初学者的，请注意，不要将其所说的视为法律。

Answer 4

将字体

line-height

设置为与分区高度（15 px）完全一致，它将位于垂直中心。再加上

text-align:center;

将使其水平居中。

将这些 css 属性添加到您的段落 css 中。看看这个示例

Answer 5

在 Chrome 中，文本出现在框外，而在 IE8 中，文本显示正确。 应用以下内容：

<style>
    .divClass {
        top: 20px; 
        left: 110px; 
        z-index: 3; 
        width:50px;
        background:#FFFFFF;
        border-color: #E2943C;
        border-style: solid;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-right-width: 1px
    }
    </style> 

    <div
       class="divClass">

      <p> 
        <font size="-1" color="#E2943C" face="Lucida Sans Unicode, Lucida Grande, sans-serif"> Beta </font> </p>  
    </div>