Question

我是html的新手，我试图将橙色文字放入带有橙色边框的白色框中。我有：

    <div
   style="
   top: 20px; 
   left: 110px; 
   position: absolute; 
   z-index: 3; 
   visibility: show;
    width: 45px;
   height: 15px;
   background:#FFFFFF;
   border-color: #E2943C;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;">

  <p> 
    <font size="-1" color="#E2943C" face="Lucida Sans Unicode, Lucida Grande, sans-serif"> Beta </font> </p>  
</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像素）相同，它将位于垂直中心。另外，添加text-align:center;会使其水平居中。

将这些css属性添加到段落css中。看看这个Example

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>

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

5 个答案: