3

我是 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>

出于某种原因，文本显示在框下方而不是其中。我确定这是一些简单的愚蠢错误，但我似乎无法确定它 - 有人有什么建议吗？

4

5 回答 5

3

只需应用margin:0px在p标签上，它应该可以工作您的 div 高度很小，这就是为什么文本由于默认边距而下降的原因p

于 2012-08-22T18:31:28.613 回答
3

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

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

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;
}
于 2012-08-22T18:32:01.800 回答
2

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

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

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

http://jsfiddle.net/FvC9n/

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

一个很好的起点（如果你可以在没有视频的情况下应付的话）是http://www.w3schools.com/css/css_howto.asp它是针对初学者的，当心，不要把它所说的当作法律。

于 2012-08-22T18:34:18.353 回答
1

使您的字体line-height精确到分区的高度（15 px），它将位于垂直中心。加上添加text-align:center;将使其水平居中。

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

于 2012-08-22T18:35:11.330 回答
0

在 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>
于 2012-08-22T18:36:32.327 回答